/* =========================================================
   AYLWARD SOLUTIONS — HOME
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
    --red:        #D10A11;
    --red-dark:   #A30009;
    --red-bright: #FF1A22;
    --black:      #0A0A0A;
    --ink:        #1A1A1A;
    --grey-900:   #2A2A2A;
    --grey-700:   #555;
    --grey-500:   #888;
    --grey-300:   #D8D8D8;
    --grey-200:   #ECECEC;
    --grey-100:   #F5F5F5;
    --grey-50:    #FAFAFA;
    --white:      #FFFFFF;

    --font-body:    'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-display: 'Poppins', system-ui, sans-serif;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;

    --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.06);
    --shadow:    0 12px 32px -8px rgba(10, 10, 10, 0.12);
    --shadow-lg: 0 30px 60px -20px rgba(10, 10, 10, 0.25);
    --shadow-red:0 20px 40px -12px rgba(209, 10, 17, 0.35);

    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:   cubic-bezier(0.55, 0, 0.7, 0.2);

    --container: 1240px;
    --nav-h:     80px;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

button {
    font: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
}

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

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------- Utilities ---------- */
.text-accent { color: var(--red); }

.text-grad {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 50%, var(--red-dark) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradShift 8s ease-in-out infinite;
}

@keyframes gradShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    transition:
        transform 0.35s var(--ease),
        box-shadow 0.35s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease),
        border-color 0.35s var(--ease);
    will-change: transform;
    white-space: nowrap;
}

.btn svg { transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
    background: var(--red);
    color: var(--white);
    box-shadow: 0 6px 20px -6px rgba(209, 10, 17, 0.5);
}

.btn--primary:hover {
    background: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(209, 10, 17, 0.55);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--grey-300);
}

.btn--ghost:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
    transform: translateY(-2px);
}

.btn--white {
    background: var(--white);
    color: var(--red);
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4);
}

.btn--white:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -12px rgba(0, 0, 0, 0.45);
}

.btn--lg {
    padding: 16px 30px;
    font-size: 1rem;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 18px;
}

.eyebrow::before {
    content: '';
    width: 30px; height: 1.5px;
    background: var(--red);
}

.eyebrow--light { color: rgba(255, 255, 255, 0.85); }
.eyebrow--light::before { background: rgba(255, 255, 255, 0.85); }

/* ---------- Section base ---------- */
.section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.section__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
}

.section__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--black);
    margin-bottom: 18px;
}

.section__lede {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--grey-700);
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.nav.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--grey-200);
    box-shadow: 0 8px 24px -16px rgba(10, 10, 10, 0.18);
}

.nav__inner {
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}

.nav__logo {
    display: flex;
    align-items: center;
    transition: transform 0.4s var(--ease);
}
.nav__logo:hover { transform: scale(1.03); }
.nav__logo img { height: 40px; width: auto; }

.nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
}

.nav__links a {
    position: relative;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    padding: 8px 2px;
}

.nav__links a::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 2px;
    background: var(--red);
    transform: translateX(-50%);
    transition: width 0.35s var(--ease);
}

.nav__links a:hover { color: var(--red); }
.nav__links a:hover::after { width: 100%; }

.nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.nav__toggle span {
    width: 24px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--white);
    padding: 32px 28px;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 24px 40px -16px rgba(10, 10, 10, 0.2);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
    border-bottom: 1px solid var(--grey-200);
}

.nav__mobile.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.nav__mobile a {
    padding: 14px 4px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--grey-100);
}

.nav__mobile a.btn {
    margin-top: 16px;
    border: 0;
    justify-content: center;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    padding: calc(var(--nav-h) + 60px) 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse at top, #FFF 0%, #FCFCFC 60%, #F6F6F6 100%);
}

.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero__grid {
    position: absolute;
    inset: -2px;
    z-index: 2;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
}

.hero__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform;
}

.hero__shape--1 {
    width: 480px; height: 480px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, var(--red) 0%, transparent 65%);
    opacity: 0.18;
    animation: floatA 18s ease-in-out infinite;
}

.hero__shape--2 {
    width: 360px; height: 360px;
    bottom: -80px; right: -80px;
    background: radial-gradient(circle, var(--red-bright) 0%, transparent 65%);
    opacity: 0.14;
    animation: floatB 22s ease-in-out infinite;
}

.hero__shape--3 {
    width: 240px; height: 240px;
    top: 30%; right: 10%;
    background: radial-gradient(circle, var(--black) 0%, transparent 65%);
    opacity: 0.06;
    animation: floatA 26s ease-in-out infinite reverse;
}

.hero__glow {
    position: absolute;
    width: 800px; height: 600px;
    top: 20%;
    left: 50%;
    margin-left: -400px;
    background: radial-gradient(ellipse, rgba(209, 10, 17, 0.05) 0%, transparent 65%);
    will-change: transform;
}

@keyframes floatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.1); }
}
@keyframes floatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, -40px) scale(1.08); }
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 980px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--grey-700);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    margin-bottom: 28px;
}

.hero__badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(209, 10, 17, 0.6);
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(209, 10, 17, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(209, 10, 17, 0); }
    100% { box-shadow: 0 0 0 0 rgba(209, 10, 17, 0); }
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--black);
    margin-bottom: 28px;
}

.hero__subtitle {
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.65;
    color: var(--grey-700);
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 80px;
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--grey-200);
}

.hero__stat-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.hero__stat-label {
    font-size: 0.85rem;
    color: var(--grey-500);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.hero__scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--grey-500);
    z-index: 2;
}

.hero__scroll-line {
    width: 1.5px;
    height: 50px;
    background: linear-gradient(to bottom, var(--grey-300), transparent);
    position: relative;
    overflow: hidden;
}

.hero__scroll-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--red), transparent);
    transform: translateY(-100%);
    animation: scrollDot 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollDot {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* =========================================================
   TECH STACK STRIP
   ========================================================= */
.tech-strip {
    background: var(--white);
    padding: 70px 0 80px;
    overflow: hidden;
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
}

.tech-strip__eyebrow {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey-500);
    margin-bottom: 48px;
}

.tech-strip__wrap {
    position: relative;
    overflow: hidden;
    /* edge fade so logos elegantly enter/exit */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.tech-strip__track {
    display: flex;
    width: max-content;
    animation: techMarquee 55s linear infinite;
}

.tech-strip__group {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    flex-shrink: 0;
}

.tech-strip__group li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    flex-shrink: 0;
}

.tech-strip__group img {
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
    filter: saturate(0.95);
}

.tech-strip__group li:hover img {
    transform: scale(1.15) translateY(-2px);
    filter: saturate(1.1);
}

@keyframes techMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 820px) {
    .tech-strip { padding: 50px 0 60px; }
    .tech-strip__eyebrow { margin-bottom: 36px; font-size: 0.72rem; }
    .tech-strip__group li { width: 120px; }
    .tech-strip__group img { height: 34px; }
}

@media (max-width: 480px) {
    .tech-strip__group li { width: 100px; }
    .tech-strip__group img { height: 30px; }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services { background: var(--white); }

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.card {
    position: relative;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    transition:
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.5s var(--ease);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
    z-index: 3;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}
.card:hover::after { transform: scaleX(1); }

.card__body {
    padding: 28px 30px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
    color: var(--black);
}

.card p {
    font-size: 0.95rem;
    color: var(--grey-700);
    line-height: 1.65;
    margin-bottom: 22px;
    flex: 1;
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--red);
    letter-spacing: 0.01em;
    transition: gap 0.35s var(--ease);
}

.card:hover .card__link { gap: 12px; }

/* =========================================================
   CARD MOCKUPS — branded, on-topic visuals
   ========================================================= */
.card__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #FAFAFA 0%, #F0F0F0 100%);
    border-bottom: 1px solid var(--grey-200);
    transition: transform 0.6s var(--ease);
}

.card:hover .card__visual { transform: scale(1.02); }

/* Subtle parallax-y red glow that brightens on hover */
.card__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(209, 10, 17, 0.08) 0%, transparent 60%);
    opacity: 0.7;
    transition: opacity 0.5s var(--ease);
    z-index: 0;
}
.card:hover .card__visual::before { opacity: 1; }

/* Brand "A" mark — used inside multiple mockups */
.mu-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--red);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.04em;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(209, 10, 17, 0.35);
}
.mu-logo--sm { width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }
.mu-logo--white { background: var(--white); color: var(--red); }

/* Generic placeholder bars used across mockups */
.mu-bar {
    display: block;
    background: var(--grey-300);
    border-radius: 999px;
}
.mu-bar--xxs { height: 4px; width: 70%; }
.mu-bar--xs  { height: 5px; width: 50px; }
.mu-bar--sm  { height: 6px; width: 60%; }
.mu-bar--md  { height: 8px; width: 80%; }
.mu-bar--lg  { height: 12px; width: 90%; }
.mu-bar--short { width: 35%; }
.mu-bar--white { background: rgba(255,255,255,0.85); }

.mu-cta-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--grey-300);
    font-size: 8px;
    font-weight: 700;
    color: var(--ink);
    background: var(--white);
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.mu-cta-pill--filled { background: var(--red); color: var(--white); border-color: var(--red); }
.mu-cta-pill--ghost  { background: transparent; }

/* ---------- Web Development: browser ---------- */
.mu-browser {
    position: absolute;
    top: 14%; left: 8%; right: 8%; bottom: 8%;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    box-shadow: 0 18px 38px -16px rgba(10,10,10,0.25);
    overflow: hidden;
    transform: rotate(-1.5deg);
    transition: transform 0.6s var(--ease);
    z-index: 1;
}
.card:hover .mu-browser { transform: rotate(0deg) translateY(-2px); }

.mu-browser__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
}
.mu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-300); }
.mu-dot:nth-child(1) { background: #FF6058; }
.mu-dot:nth-child(2) { background: #FFBD2D; }
.mu-dot:nth-child(3) { background: #28C840; }

.mu-browser__url {
    flex: 1;
    margin-left: 10px;
    padding: 3px 9px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 6px;
    font-size: 8px;
    color: var(--grey-700);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mu-browser__page {
    padding: 10px 14px;
    height: calc(100% - 26px);
}

.mu-browser__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grey-100);
}
.mu-browser__nav .mu-bar { background: var(--grey-300); }
.mu-browser__nav .mu-cta-pill { margin-left: auto; }

.mu-browser__hero {
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.mu-browser__hero .mu-bar--lg { background: var(--ink); }
.mu-browser__cta-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* ---------- Mobile Development: phone ---------- */
.card__visual--mobile { background: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 100%); }

.mu-phone {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    width: 38%;
    aspect-ratio: 9 / 18;
    background: var(--black);
    border-radius: 18px;
    padding: 4px;
    box-shadow:
        0 24px 50px -16px rgba(10, 10, 10, 0.4),
        0 0 0 1.5px rgba(255,255,255,0.15) inset;
    transition: transform 0.6s var(--ease);
    z-index: 1;
}
.card:hover .mu-phone { transform: translate(-50%, -50%) rotate(0deg); }

.mu-phone__notch {
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 36%; height: 7px;
    background: var(--black);
    border-radius: 0 0 6px 6px;
    z-index: 2;
}

.mu-phone__screen {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFF 0%, #F8F8F8 100%);
    overflow: hidden;
    padding: 14px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mu-phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
    font-weight: 700;
    color: var(--ink);
    padding: 0 4px;
}
.mu-phone__icons { display: flex; gap: 3px; }
.mu-phone__sig, .mu-phone__bat {
    width: 8px; height: 5px;
    background: var(--ink);
    border-radius: 1px;
}
.mu-phone__bat { width: 11px; }

.mu-phone__header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
}
.mu-phone__greet {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.mu-phone__card {
    margin: 0 2px;
    padding: 8px;
    border-radius: 8px;
    background: var(--grey-100);
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}
.mu-phone__card--featured { background: var(--red); box-shadow: 0 4px 10px -2px rgba(209, 10, 17, 0.4); }

.mu-phone__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 0 2px;
}
.mu-phone__minicard {
    aspect-ratio: 1;
    background: var(--grey-100);
    border-radius: 6px;
}

.mu-phone__tabbar {
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    padding: 6px 4px;
    border-top: 1px solid var(--grey-200);
    background: var(--white);
}
.mu-phone__tab {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--grey-300);
}
.mu-phone__tab.is-active { background: var(--red); transform: scale(1.4); }

/* ---------- Security: status panel ---------- */
.card__visual--security { background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%); }
.card__visual--security::before {
    background: radial-gradient(ellipse at 30% 20%, rgba(209, 10, 17, 0.25) 0%, transparent 60%);
    opacity: 1;
}

.mu-security {
    position: absolute;
    inset: 14% 12%;
    color: var(--white);
    z-index: 1;
}

.mu-security__shield {
    width: 38px; height: 38px;
    margin-bottom: 12px;
    color: var(--red);
    filter: drop-shadow(0 4px 12px rgba(209, 10, 17, 0.5));
    animation: muShieldPulse 3s ease-in-out infinite;
}
.mu-security__shield svg { width: 100%; height: 100%; }

@keyframes muShieldPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 6px 18px rgba(209, 10, 17, 0.7)); }
}

.mu-security__title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.mu-security__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mu-security__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
}

.mu-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #28C840;
    box-shadow: 0 0 8px rgba(40, 200, 64, 0.6);
    flex-shrink: 0;
}

.mu-watermark {
    position: absolute;
    bottom: 0; right: 0;
    font-family: var(--font-display);
    font-size: 60px;
    font-weight: 900;
    color: var(--red);
    opacity: 0.15;
    line-height: 0.8;
    letter-spacing: -0.06em;
    pointer-events: none;
}
.mu-watermark--top { bottom: auto; top: 0; }

/* ---------- Custom Software: dashboard ---------- */
.mu-dashboard {
    position: absolute;
    inset: 12% 8%;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    box-shadow: 0 18px 38px -16px rgba(10,10,10,0.25);
    overflow: hidden;
    display: grid;
    grid-template-columns: 22% 1fr;
    z-index: 1;
}

.mu-dashboard__sidebar {
    background: var(--black);
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.mu-dashboard__sidebar .mu-logo { margin-bottom: 6px; }
.mu-side-item {
    width: 70%;
    height: 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
}
.mu-side-item.is-active { background: var(--red); box-shadow: 0 0 6px rgba(209, 10, 17, 0.6); }

.mu-dashboard__main {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mu-dashboard__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mu-dashboard__widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.mu-widget {
    padding: 7px 8px;
    border-radius: 6px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mu-widget__num {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.02em;
    line-height: 1;
}
.mu-dashboard__chart {
    flex: 1;
    width: 100%;
    color: var(--red);
    margin-top: 2px;
}

/* ---------- AI & Automation: chat ---------- */
.card__visual--ai { background: linear-gradient(135deg, #FAFAFA 0%, #F0F0F0 100%); }

.mu-chat {
    position: absolute;
    inset: 12% 14%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}

.mu-chat__bubble {
    max-width: 78%;
    padding: 7px 10px;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.mu-chat__bubble--user {
    background: var(--red);
    align-self: flex-end;
    flex-direction: column;
    box-shadow: 0 4px 10px -2px rgba(209, 10, 17, 0.35);
    border-bottom-right-radius: 3px;
}
.mu-chat__bubble--bot {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-bottom-left-radius: 3px;
}
.mu-chat__bubble--typing { padding: 8px 10px; align-self: flex-start; max-width: none; width: auto; }

.mu-chat__avatar {
    width: 16px; height: 16px;
    border-radius: 5px;
    background: var(--red);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0;
}

.mu-chat__lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    padding-top: 2px;
}

.mu-chat__typing { display: inline-flex; align-items: center; gap: 5px; }
.mu-chat__typing span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--grey-500);
    animation: muTypingPulse 1.2s ease-in-out infinite;
}
.mu-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.mu-chat__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes muTypingPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40%           { opacity: 1; transform: scale(1.2); }
}

.mu-chat__input {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    padding: 5px 6px 5px 12px;
}
.mu-chat__send {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* ---------- Growth & Conversion: analytics ---------- */
.card__visual--growth { background: linear-gradient(135deg, #FFF 0%, #F8F8F8 100%); }

.mu-analytics {
    position: absolute;
    inset: 12% 12%;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    padding: 10px 14px 0;
    box-shadow: 0 16px 32px -14px rgba(10,10,10,0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.mu-analytics__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
}
.mu-analytics__label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey-500);
}

.mu-analytics__metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.mu-analytics__num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.03em;
    line-height: 1;
}
.mu-analytics__trend {
    color: #28C840;
    font-size: 12px;
    font-weight: 700;
}

.mu-analytics__line {
    width: 100%;
    height: 30px;
    margin-top: 6px;
}

.mu-analytics__bars {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 36%;
    padding-bottom: 8px;
}
.mu-analytics__bars span {
    flex: 1;
    background: linear-gradient(180deg, var(--red) 0%, rgba(209, 10, 17, 0.4) 100%);
    border-radius: 2px 2px 0 0;
    transition: transform 0.4s var(--ease);
}
.card:hover .mu-analytics__bars span {
    transform: scaleY(1.05);
    transform-origin: bottom;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mu-security__shield,
    .mu-chat__typing span { animation: none; }
}

/* =========================================================
   WHY US
   ========================================================= */
.why {
    background: var(--grey-50);
    position: relative;
}

.why__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.why__shape {
    position: absolute;
    width: 600px; height: 600px;
    top: -150px; right: -200px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.06) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(40px);
    will-change: transform;
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--grey-200);
}

.why__feature {
    padding: 44px 36px;
    background: var(--white);
    transition: background 0.4s var(--ease), transform 0.4s var(--ease);
    position: relative;
}

.why__feature::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--red);
    transition: width 0.5s var(--ease);
}

.why__feature:hover { background: var(--grey-50); }
.why__feature:hover::before { width: 100%; }

.why__num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}

.why__feature h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
}

.why__feature p {
    font-size: 0.95rem;
    color: var(--grey-700);
    line-height: 1.65;
}

/* =========================================================
   PROCESS
   ========================================================= */
.process { background: var(--white); }

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--grey-200);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.step:hover {
    transform: translateY(-8px);
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
    box-shadow: var(--shadow-lg);
}

.step:hover h3 { color: var(--white); }
.step:hover p  { color: rgba(255, 255, 255, 0.78); }
.step:hover .step__num { background: var(--red); color: var(--white); border-color: var(--red); }

.step__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #FAFAFA 0%, #F0F0F0 100%);
    border-bottom: 1px solid var(--grey-200);
    overflow: hidden;
    transition: transform 0.6s var(--ease);
}

.step:hover .step__visual { transform: scale(1.02); }

.step__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(209, 10, 17, 0.1) 0%, transparent 60%);
    opacity: 0.7;
    transition: opacity 0.5s var(--ease);
    z-index: 0;
}
.step:hover .step__visual::before { opacity: 1; }

.step__body {
    padding: 26px 28px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.step__num {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    color: var(--red);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 18px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.step h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
    transition: color 0.4s var(--ease);
}

.step p {
    font-size: 0.93rem;
    color: var(--grey-700);
    line-height: 1.65;
    transition: color 0.4s var(--ease);
}

/* Shared bar primitive for step mockups */
.step__bar {
    display: block;
    height: 5px;
    width: 70%;
    background: var(--grey-300);
    border-radius: 999px;
}
.step__bar--short { width: 40%; }
.step__bar--lg { height: 8px; width: 80%; background: var(--ink); }

/* ===========================================================
   STEP 1 — DISCOVER (chat bubbles + listening pulses)
   =========================================================== */
.step__visual--discover {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 22px;
    gap: 8px;
    z-index: 0;
}

.step__bubble {
    position: relative;
    z-index: 1;
    padding: 8px 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 70%;
    opacity: 0;
    animation: stepBubbleIn 0.6s var(--ease) forwards;
}

.step__bubble--theirs {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    animation-delay: 0.2s;
}

.step__bubble--ours {
    background: var(--red);
    color: var(--white);
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    box-shadow: 0 4px 12px -3px rgba(209, 10, 17, 0.4);
    animation-delay: 0.5s;
}

.step__bubble--small {
    animation-delay: 0.8s;
}

@keyframes stepBubbleIn {
    0%   { opacity: 0; transform: translateY(6px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.step__bubble--ours .step__bar {
    background: rgba(255, 255, 255, 0.9);
}

.step__bubble-avatar {
    width: 16px; height: 16px;
    border-radius: 4px;
    background: var(--white);
    color: var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0;
}

.step__bubble-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.step__pulse {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2px solid var(--red);
    opacity: 0;
    pointer-events: none;
    animation: stepPulse 3s ease-out infinite;
}
.step__pulse--1 { bottom: 10%; right: 12%; }
.step__pulse--2 { bottom: 10%; right: 12%; animation-delay: 1.5s; }

@keyframes stepPulse {
    0%   { opacity: 0; transform: scale(0.4); }
    50%  { opacity: 0.4; }
    100% { opacity: 0; transform: scale(1.6); }
}

/* ===========================================================
   STEP 2 — DESIGN (wireframe with selection)
   =========================================================== */
.step__visual--design {
    background:
        linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%),
        repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(10,10,10,0.04) 18px, rgba(10,10,10,0.04) 19px),
        repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(10,10,10,0.04) 18px, rgba(10,10,10,0.04) 19px);
    padding: 16px;
}

.step__wireframe {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 10px 24px -10px rgba(10,10,10,0.12);
}

.step__wire-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--grey-100);
}

.step__wire-logo {
    width: 16px; height: 16px;
    background: var(--red);
    color: var(--white);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10px;
    flex-shrink: 0;
}

.step__wire-nav {
    width: 22px; height: 4px;
    background: var(--grey-200);
    border-radius: 2px;
}

.step__wire-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    padding: 4px 0;
}

.step__wire-row {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}

.step__wire-card {
    aspect-ratio: 1 / 0.8;
    background: var(--grey-100);
    border-radius: 4px;
    border: 1.5px solid transparent;
    transition: all 0.4s var(--ease);
}

.step__wire-card.is-selected {
    background: rgba(209, 10, 17, 0.08);
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(209, 10, 17, 0.15);
    animation: stepWirePulse 2.5s ease-in-out infinite;
}

@keyframes stepWirePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(209, 10, 17, 0.15); }
    50%      { box-shadow: 0 0 0 6px rgba(209, 10, 17, 0.05); }
}

.step__pen {
    position: absolute;
    top: 60%; right: 18%;
    width: 22px; height: 22px;
    color: var(--red);
    filter: drop-shadow(0 4px 8px rgba(209, 10, 17, 0.4));
    z-index: 2;
    animation: stepPenFloat 3s ease-in-out infinite;
}
.step__pen svg { width: 100%; height: 100%; }

@keyframes stepPenFloat {
    0%, 100% { transform: translate(0, 0) rotate(-12deg); }
    50%      { transform: translate(-3px, -5px) rotate(-6deg); }
}

/* ===========================================================
   STEP 3 — DEVELOP (code editor)
   =========================================================== */
.step__visual--develop {
    background: linear-gradient(135deg, #0F0F12 0%, #1A1A20 100%);
    padding: 0;
}

.step__visual--develop::before {
    background: radial-gradient(ellipse at 20% 80%, rgba(209, 10, 17, 0.25) 0%, transparent 60%);
    opacity: 1;
}

.step__editor {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 9px;
    color: rgba(255,255,255,0.7);
}

.step__editor-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.step__editor-tab {
    font-size: 8px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
}
.step__editor-tab.is-active { background: rgba(255, 255, 255, 0.08); color: var(--white); }

.step__editor-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}

.step__editor-body {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.step__editor-line {
    display: flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
}
.step__editor-line .ln { color: rgba(255,255,255,0.3); width: 16px; }
.step__editor-line .kw { color: #FF6B7E; font-weight: 600; }
.step__editor-line .vr { color: #FFD479; }
.step__editor-line .tk { color: rgba(255,255,255,0.55); }
.step__editor-line .st { color: #A8E374; }
.step__editor-line .fn { color: #6FB1FF; }

.step__editor-line .cur {
    display: inline-block;
    width: 2px;
    height: 11px;
    background: var(--red);
    margin-left: 2px;
    animation: stepCursor 1.1s steps(2) infinite;
}

@keyframes stepCursor {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.step__editor-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.step__editor-dotgreen {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #28C840;
    box-shadow: 0 0 6px rgba(40, 200, 64, 0.7);
    animation: stepGreenPulse 1.6s ease-in-out infinite;
}

@keyframes stepGreenPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(40, 200, 64, 0.6); }
    50%      { box-shadow: 0 0 12px rgba(40, 200, 64, 1); }
}

/* ===========================================================
   STEP 4 — DELIVER (rocket launch)
   =========================================================== */
.step__visual--deliver {
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F0F0 100%);
}
.step__visual--deliver::before {
    background: radial-gradient(ellipse at 50% 90%, rgba(209, 10, 17, 0.25) 0%, transparent 60%);
    opacity: 1;
}

.step__launch {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.step__rocket {
    position: absolute;
    left: 50%; top: 30%;
    transform: translateX(-50%);
    width: 42px; height: 42px;
    color: var(--red);
    filter: drop-shadow(0 8px 16px rgba(209, 10, 17, 0.45));
    animation: stepRocket 3s ease-in-out infinite;
    z-index: 3;
}
.step__rocket svg { width: 100%; height: 100%; }

@keyframes stepRocket {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
    50%      { transform: translateX(-50%) translateY(-8px) rotate(2deg); }
}

.step__rocket-flame {
    position: absolute;
    left: 50%;
    top: calc(30% + 36px);
    transform: translateX(-50%);
    width: 22px; height: 30px;
    background: radial-gradient(ellipse at top, var(--red) 0%, var(--red-bright) 30%, transparent 80%);
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    filter: blur(4px);
    z-index: 2;
    animation: stepFlame 0.4s ease-in-out infinite alternate;
    opacity: 0.85;
}

@keyframes stepFlame {
    0%   { transform: translateX(-50%) scale(0.85, 1); opacity: 0.8; }
    100% { transform: translateX(-50%) scale(1.05, 0.9); opacity: 1; }
}

.step__launch-badge {
    position: absolute;
    left: 50%; bottom: 16%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    box-shadow: 0 8px 18px -6px rgba(10,10,10,0.2);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--red);
    z-index: 4;
}
.step__launch-badge svg {
    width: 12px; height: 12px;
    color: #28C840;
}

.step__particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--red);
    opacity: 0;
    animation: stepParticle 2.2s ease-in infinite;
}
.step__particle--1 { left: 30%; bottom: 30%; animation-delay: 0s; }
.step__particle--2 { left: 65%; bottom: 35%; animation-delay: 0.3s; }
.step__particle--3 { left: 22%; bottom: 38%; animation-delay: 0.6s; background: var(--red-bright); }
.step__particle--4 { left: 75%; bottom: 28%; animation-delay: 0.9s; }
.step__particle--5 { left: 45%; bottom: 22%; animation-delay: 1.2s; background: var(--red-bright); }
.step__particle--6 { left: 55%; bottom: 40%; animation-delay: 1.5s; }

@keyframes stepParticle {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-50px) scale(0.2); }
}

/* When step card flips to black on hover, keep visuals readable */
.step:hover .step__visual { border-bottom-color: rgba(255,255,255,0.08); }

@media (prefers-reduced-motion: reduce) {
    .step__bubble,
    .step__pulse,
    .step__pen,
    .step__wire-card.is-selected,
    .step__rocket,
    .step__rocket-flame,
    .step__particle,
    .step__editor-line .cur,
    .step__editor-dotgreen { animation: none !important; }
    .step__bubble { opacity: 1; }
}

/* ---------- Speed-themed heading (Process section) ---------- */
.section__title--speed {
    line-height: 1.08;
}

.speed-word {
    display: inline-flex;
    align-items: center;
    gap: 0.18em;
    position: relative;
    padding: 0 0.05em;
    white-space: nowrap;
}

.speed-word em {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-bright) 50%, var(--red-dark) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 220% 220%;
    animation: gradShift 3.5s ease-in-out infinite;
    transform: skewX(-7deg);
    transform-origin: left center;
    display: inline-block;
    padding: 0.05em 0.18em 0.05em 0.05em;
    margin-right: 0.1em;
    letter-spacing: 0;
}

.speed-bolt-svg {
    width: 0.9em;
    height: 0.9em;
    color: var(--red);
    filter: drop-shadow(0 6px 14px rgba(209, 10, 17, 0.55));
    animation: speedBolt 1.8s ease-in-out infinite;
    flex-shrink: 0;
    transform-origin: center;
}

@keyframes speedBolt {
    0%, 100% {
        transform: rotate(-6deg) scale(1);
        filter: drop-shadow(0 6px 14px rgba(209, 10, 17, 0.55));
    }
    20% {
        transform: rotate(4deg) scale(1.18);
        filter: drop-shadow(0 8px 22px rgba(255, 26, 34, 0.95));
    }
    40% {
        transform: rotate(-3deg) scale(0.94);
        filter: drop-shadow(0 4px 10px rgba(209, 10, 17, 0.45));
    }
    60% {
        transform: rotate(2deg) scale(1.08);
        filter: drop-shadow(0 6px 14px rgba(209, 10, 17, 0.6));
    }
}

/* speed lines that streak off the bolt for that "fast" feel */
.speed-word::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 50%;
    width: 24px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--red));
    border-radius: 2px;
    opacity: 0.7;
    animation: speedStreak 1.8s ease-in-out infinite;
}

@keyframes speedStreak {
    0%, 100% { opacity: 0.4; transform: translateY(-50%) scaleX(0.7); }
    40%      { opacity: 1;   transform: translateY(-50%) scaleX(1.2); }
}

@media (max-width: 720px) {
    .speed-word::before { display: none; }
    .speed-word { gap: 0.14em; }
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta {
    position: relative;
    padding: 130px 0;
    background: var(--black);
    color: var(--white);
    overflow: hidden;
    text-align: center;
}

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

.cta__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.cta__shape--1 {
    width: 700px; height: 700px;
    top: -250px; left: -250px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.55) 0%, transparent 65%);
    animation: floatA 20s ease-in-out infinite;
}

.cta__shape--2 {
    width: 500px; height: 500px;
    bottom: -200px; right: -150px;
    background: radial-gradient(circle, rgba(255, 26, 34, 0.4) 0%, transparent 65%);
    animation: floatB 24s ease-in-out infinite;
}

.cta__inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.cta__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: 22px;
}

.cta__title-italic {
    display: inline-block;
    font-style: italic;
    font-weight: 500;
    padding-right: 0.12em;
    background: linear-gradient(135deg, #FFF 0%, var(--red-bright) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta__lede {
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    color: rgba(255, 255, 255, 0.75);
    max-width: 560px;
    margin: 0 auto 40px;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.cta__email {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 2px;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cta__email:hover { color: var(--white); border-color: var(--white); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: var(--white);
    padding-top: 80px;
    border-top: 1px solid var(--grey-200);
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 60px;
    padding-bottom: 60px;
}

.footer__logo {
    height: 52px;
    width: auto;
    margin-bottom: 18px;
    display: block;
}
a.footer__logo-link {
    display: inline-block;
    line-height: 0;
    margin-bottom: 18px;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
a.footer__logo-link .footer__logo { margin-bottom: 0; }
a.footer__logo-link:hover { opacity: 0.78; }

.footer__brand p {
    color: var(--grey-700);
    font-size: 0.95rem;
    max-width: 320px;
    line-height: 1.6;
}

.footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer__col h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--black);
    margin-bottom: 18px;
}

.footer__col a {
    display: block;
    font-size: 0.92rem;
    color: var(--grey-700);
    padding: 6px 0;
}

.footer__col a:hover { color: var(--red); }

.footer__col a.footer__contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer__contact svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--red);
    transition: transform 0.3s var(--ease);
}

.footer__contact:hover svg {
    transform: translateX(2px) scale(1.08);
}

.footer__socials {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.footer__col .footer__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--grey-300);
    color: var(--grey-700);
    padding: 0;
    transition:
        background 0.35s var(--ease),
        color 0.35s var(--ease),
        border-color 0.35s var(--ease),
        transform 0.35s var(--ease);
}

.footer__col .footer__socials a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-2px);
}

.footer__socials svg {
    width: 16px;
    height: 16px;
}

.footer__bottom {
    border-top: 1px solid var(--grey-200);
    padding: 22px 0;
}

.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--grey-500);
}

/* =========================================================
   NAV DROPDOWN / MEGAMENU
   ========================================================= */
.nav__dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav__dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    padding: 8px 2px;
    cursor: pointer;
    background: none;
    border: 0;
    transition: color 0.25s var(--ease);
}

.nav__dropdown-trigger::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 2px;
    background: var(--red);
    transform: translateX(-50%);
    transition: width 0.35s var(--ease);
}

.nav__dropdown:hover .nav__dropdown-trigger,
.nav__dropdown.is-open .nav__dropdown-trigger,
.nav__dropdown-trigger.is-active { color: var(--red); }

.nav__dropdown:hover .nav__dropdown-trigger::after,
.nav__dropdown.is-open .nav__dropdown-trigger::after,
.nav__dropdown-trigger.is-active::after { width: 100%; }

.nav__chevron {
    transition: transform 0.35s var(--ease);
}

.nav__dropdown:hover .nav__chevron,
.nav__dropdown.is-open .nav__chevron {
    transform: rotate(180deg);
}

.nav__megamenu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 720px;
    max-width: calc(100vw - 32px);
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.25);
    padding: 24px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
    z-index: 110;
}

/* Hover bridge so the menu doesn't close as you cross the gap */
.nav__megamenu::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 0; right: 0;
    height: 22px;
}

.nav__dropdown:hover .nav__megamenu,
.nav__dropdown:focus-within .nav__megamenu,
.nav__dropdown.is-open .nav__megamenu {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav__mega-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav__mega-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--grey-500);
    padding: 6px 12px 12px;
}

/* override the .nav__links a base styles inside the megamenu */
.nav__links .nav__mega-col a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.25s var(--ease);
}

.nav__links .nav__mega-col a::after { display: none; }
.nav__links .nav__mega-col a:hover { background: var(--grey-50); color: inherit; }

.nav__mega-col a strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    transition: color 0.25s var(--ease);
}

.nav__mega-col a:hover strong { color: var(--red); }

.nav__mega-col a span {
    display: block;
    font-size: 0.78rem;
    color: var(--grey-500);
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------- Mobile accordion ---------- */
.nav__mobile-acc {
    border-bottom: 1px solid var(--grey-100);
}
.nav__mobile-acc summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 4px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav__mobile-acc summary::-webkit-details-marker { display: none; }
.nav__mobile-acc summary::after {
    content: '';
    width: 10px; height: 10px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    margin-bottom: 4px;
    transition: transform 0.3s var(--ease);
}
.nav__mobile-acc[open] summary::after {
    transform: rotate(-135deg);
    margin-bottom: -4px;
}
.nav__mobile-sub {
    padding: 6px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nav__mobile-sub-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--grey-500);
    padding: 14px 4px 6px;
}
.nav__mobile .nav__mobile-sub a {
    padding: 9px 4px !important;
    font-size: 0.95rem !important;
    border-bottom: 0 !important;
    color: var(--grey-700) !important;
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.services-hero {
    position: relative;
    padding: calc(var(--nav-h) + 90px) 0 110px;
    background: radial-gradient(ellipse at top, var(--white) 0%, #FBFBFB 60%, var(--grey-50) 100%);
    text-align: center;
    overflow: hidden;
}

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

.services-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
    will-change: transform;
}

.services-hero__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.services-hero__shape--1 {
    width: 480px; height: 480px;
    top: -130px; left: -130px;
    background: radial-gradient(circle, var(--red) 0%, transparent 65%);
    opacity: 0.18;
    animation: floatA 20s ease-in-out infinite;
}
.services-hero__shape--2 {
    width: 380px; height: 380px;
    bottom: -110px; right: -100px;
    background: radial-gradient(circle, var(--red-bright) 0%, transparent 65%);
    opacity: 0.14;
    animation: floatB 24s ease-in-out infinite;
}
.services-hero__glow {
    position: absolute;
    width: 800px; height: 600px;
    top: 20%; left: 50%;
    margin-left: -400px;
    background: radial-gradient(ellipse, rgba(209, 10, 17, 0.05) 0%, transparent 65%);
    will-change: transform;
}

.services-hero__inner { position: relative; z-index: 1; }

.services-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--black);
    margin-bottom: 24px;
}

.services-hero__lede {
    max-width: 720px;
    margin: 0 auto 32px;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--grey-700);
    line-height: 1.65;
}

.services-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* ---------- Service section (alternating layout) ---------- */
.service-section {
    padding: 120px 0;
    background: var(--white);
    border-top: 1px solid var(--grey-100);
    overflow: hidden;
}

.service-section:nth-of-type(even-section),
.service-section:nth-child(even) { background: var(--grey-50); border-top-color: var(--grey-200); }

.service-section--featured { padding: 140px 0; }

.service-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.service-section--reverse .service-section__grid {
    grid-template-columns: 1fr 1fr;
}

.service-section--reverse .service-section__media { order: 2; }

.service-section__media {
    position: relative;
}

.service-section__media-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--grey-100);
    box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.25);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.service-section__media-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.1) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.service-section__media-frame:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -20px rgba(10, 10, 10, 0.3); }
.service-section__media-frame:hover::before { opacity: 1; }

.service-section__media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.service-section__media-frame:hover img { transform: scale(1.06); }

.service-section__media-tag {
    position: absolute;
    top: 18px; left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -6px rgba(209, 10, 17, 0.5);
}

.service-section__num {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.service-section__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--black);
    margin-bottom: 22px;
}

.service-section__lead {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    color: var(--grey-700);
    line-height: 1.65;
    margin-bottom: 32px;
}

.service-section__lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 36px;
    padding: 28px;
    border-radius: 18px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
}

.service-section:nth-child(even) .service-section__lists {
    background: var(--white);
}

.service-section__list h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--grey-200);
}

.service-section__list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-section__list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.92rem;
    color: var(--grey-700);
    line-height: 1.55;
}

.service-section__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(209, 10, 17, 0.12);
    box-shadow: inset 0 0 0 4px var(--white);
    border: 1.5px solid var(--red);
}

.service-section__cta {
    align-self: flex-start;
}

/* ---------- 3D logo showcase (Branding section) ---------- */
.service-section__media-frame--logo3d {
    background: radial-gradient(ellipse at 30% 20%, #FFF 0%, #F8F8F8 40%, #ECECEC 100%);
    perspective: 1400px;
    perspective-origin: 50% 30%;
}

.service-section__media-frame--logo3d::before { display: none; }

.logo3d-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.05) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 60%, transparent 30%, #000 100%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 60%, transparent 30%, #000 100%);
    transform: perspective(800px) rotateX(60deg) translateY(60%) scale(2.5);
    transform-origin: center bottom;
    opacity: 0.5;
    z-index: 0;
}

.logo3d-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

.logo3d-glow--a {
    width: 70%; height: 70%;
    top: 10%; left: 15%;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.4) 0%, transparent 65%);
    animation: logo3dPulse 4s ease-in-out infinite;
    will-change: opacity;
    transform: translateZ(0);
}

.logo3d-glow--b {
    width: 50%; height: 50%;
    bottom: 5%; right: 5%;
    background: radial-gradient(circle, rgba(255, 26, 34, 0.25) 0%, transparent 65%);
    animation: logo3dPulse 5s ease-in-out infinite reverse;
    will-change: opacity;
    transform: translateZ(0);
}

.logo3d-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transform-style: preserve-3d;
}

.logo3d-mark {
    position: relative;
    width: 70%;
    max-width: 460px;
    transform: rotateX(14deg) rotateY(-12deg) rotateZ(-1deg);
    transform-style: preserve-3d;
    animation: logo3dFloat 6s ease-in-out infinite;
    will-change: transform;
}

.logo3d-mark-inner {
    transform: translateZ(0) scale(1);
    transform-style: preserve-3d;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.logo3d-mark img {
    width: 100%;
    height: auto;
    display: block;
    /* 4 stacked drop-shadows (was 8) — preserves the layered 3D look at ~half the rasterization cost */
    filter:
        drop-shadow(2px 2px 0 rgba(150, 8, 12, 0.90))
        drop-shadow(4px 4px 0 rgba(150, 8, 12, 0.65))
        drop-shadow(6px 6px 0 rgba(150, 8, 12, 0.40))
        drop-shadow(0 22px 40px rgba(10, 10, 10, 0.28));
}

.logo3d-floor {
    position: absolute;
    bottom: -8%;
    left: 50%;
    width: 80%;
    height: 28px;
    transform: translate3d(-50%, 0, -10px) rotateX(75deg);
    transform-origin: center center;
    background: radial-gradient(ellipse, rgba(10, 10, 10, 0.4) 0%, transparent 70%);
    filter: blur(14px);
    animation: logo3dFloorPulse 6s ease-in-out infinite;
    will-change: transform, opacity;
}

.logo3d-tag {
    position: absolute;
    top: 22px; left: 22px;
    z-index: 4;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

@keyframes logo3dFloat {
    0%, 100% { transform: rotateX(14deg) rotateY(-12deg) rotateZ(-1deg) translateY(0); }
    50%      { transform: rotateX(11deg) rotateY(-15deg) rotateZ(0.5deg) translateY(-14px); }
}

/* Animate transform + opacity only — no layout reflow (was animating `width`)
   and no filter re-blur per frame (was animating `filter: blur()`). */
@keyframes logo3dFloorPulse {
    0%, 100% { transform: translate3d(-50%, 0, -10px) rotateX(75deg) scaleX(1);    opacity: 0.4; }
    50%      { transform: translate3d(-50%, 0, -10px) rotateX(75deg) scaleX(0.81); opacity: 0.25; }
}

/* Opacity-only — scaling a `filter: blur()` element forces re-rasterization every frame. */
@keyframes logo3dPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.service-section__media-frame--logo3d:hover .logo3d-mark-inner {
    transform: translateY(-14px) scale(1.05);
}

.service-section__media-frame--logo3d:hover .logo3d-mark img {
    filter:
        drop-shadow(2px 2px 0 rgba(209, 10, 17, 0.95))
        drop-shadow(4px 4px 0 rgba(209, 10, 17, 0.70))
        drop-shadow(6px 6px 0 rgba(209, 10, 17, 0.45))
        drop-shadow(0 26px 50px rgba(209, 10, 17, 0.30));
}

/* Disable the floating / pulsing animations for users who prefer reduced motion,
   AND drop a chunk of GPU work on lower-end machines via the browser's hint. */
@media (prefers-reduced-motion: reduce) {
    .logo3d-mark,
    .logo3d-glow,
    .logo3d-floor {
        animation: none !important;
    }
}

@media (max-width: 1024px) {
    .logo3d-mark { width: 60%; max-width: 360px; }
    .logo3d-tag { font-size: 0.62rem; padding: 6px 11px; top: 16px; left: 16px; }
}

/* ---------- Per-service tech chips ---------- */
.service-section__tech {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--grey-200);
}

.service-section__tech-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-500);
}

.service-section__tech-label::after {
    content: '';
    width: 16px;
    height: 1.5px;
    background: var(--red);
}

.service-section__tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        color 0.4s var(--ease),
        background 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}

.service-section:nth-child(even) .tech-chip {
    background: var(--white);
}

.tech-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    z-index: -1;
}

.tech-chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: transform 0.45s var(--ease);
}

.tech-chip:hover {
    transform: translateY(-3px);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 10px 22px -8px rgba(209, 10, 17, 0.25);
}

.tech-chip:hover::before { opacity: 1; }
.tech-chip:hover img { transform: rotate(-8deg) scale(1.18); }

.tech-chip:active { transform: translateY(-1px) scale(0.98); }

/* When a tech card is targeted via anchor click, briefly pulse to highlight */
.tech-card:target {
    animation: targetPulse 1.6s var(--ease);
    border-color: var(--red);
}

@keyframes targetPulse {
    0%   { box-shadow: 0 0 0 0 rgba(209, 10, 17, 0.45); transform: translateY(0); }
    30%  { box-shadow: 0 0 0 14px rgba(209, 10, 17, 0); transform: translateY(-4px); }
    100% { box-shadow: 0 0 0 0 rgba(209, 10, 17, 0); transform: translateY(0); }
}

/* ---------- Tech section ---------- */
.tech-section {
    padding: 130px 0;
    background: var(--white);
    border-top: 1px solid var(--grey-200);
}

.tech-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.tech-card {
    position: relative;
    padding: 32px 28px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
    overflow: hidden;
}

.tech-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--red);
    transition: width 0.5s var(--ease);
}

.tech-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}
.tech-card:hover::before { width: 100%; }

.tech-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--grey-100);
}

.tech-card__head img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.tech-card__head h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.tech-card p {
    font-size: 0.9rem;
    color: var(--grey-700);
    line-height: 1.6;
    margin-bottom: 12px;
}

.tech-card p:last-child { margin-bottom: 0; }

.tech-card p strong {
    color: var(--ink);
    font-weight: 600;
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.tech-card p.tech-card__benefit {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px dashed var(--grey-200);
}
.tech-card p.tech-card__benefit strong { color: var(--red); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .service-section__grid { grid-template-columns: 1fr; gap: 50px; }
    .service-section--reverse .service-section__media { order: 0; }
    .service-section__media-frame { aspect-ratio: 16 / 10; }
    .service-section { padding: 90px 0; }
    .service-section--featured { padding: 100px 0; }
    .tech-cards { grid-template-columns: repeat(2, 1fr); }
    .tech-section { padding: 90px 0; }
}

@media (max-width: 720px) {
    .services-hero { padding: calc(var(--nav-h) + 50px) 0 70px; }
    .service-section,
    .service-section--featured { padding: 70px 0; }
    .service-section__lists { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
    .tech-cards { grid-template-columns: 1fr; }
    .tech-section { padding: 70px 0; }
}

/* On mobile, hide the desktop dropdown — the mobile menu has its own accordion */
@media (max-width: 820px) {
    .nav__dropdown { display: none; }
}

/* =========================================================
   BLOG PAGE
   ========================================================= */
.post-source { display: none !important; }

/* ---------- Hero ---------- */
.blog-hero {
    position: relative;
    padding: calc(var(--nav-h) + 90px) 0 90px;
    background: radial-gradient(ellipse at top, var(--white) 0%, #FBFBFB 60%, var(--grey-50) 100%);
    text-align: center;
    overflow: hidden;
}

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

.blog-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
    will-change: transform;
}

.blog-hero__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.blog-hero__shape--1 {
    width: 460px; height: 460px;
    top: -130px; left: -130px;
    background: radial-gradient(circle, var(--red) 0%, transparent 65%);
    opacity: 0.16;
    animation: floatA 18s ease-in-out infinite;
}
.blog-hero__shape--2 {
    width: 360px; height: 360px;
    bottom: -100px; right: -100px;
    background: radial-gradient(circle, var(--red-bright) 0%, transparent 65%);
    opacity: 0.12;
    animation: floatB 24s ease-in-out infinite;
}

.blog-hero__glow {
    position: absolute;
    width: 800px; height: 600px;
    top: 20%; left: 50%;
    margin-left: -400px;
    background: radial-gradient(ellipse, rgba(209, 10, 17, 0.05) 0%, transparent 65%);
    will-change: transform;
}

.blog-hero__inner { position: relative; z-index: 1; }

.blog-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--black);
    margin-bottom: 24px;
}

.blog-hero__lede {
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--grey-700);
    line-height: 1.65;
}

.blog-hero__stats {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 24px 36px;
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}

.blog-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.blog-hero__stat strong {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: -0.02em;
}

.blog-hero__stat span {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--grey-500);
    letter-spacing: 0.02em;
}

/* ---------- Category tags ---------- */
.blog-cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--grey-100);
    color: var(--ink);
    line-height: 1.2;
}
.blog-cat--websites { background: rgba(209, 10, 17, 0.1); color: var(--red); }
.blog-cat--software { background: rgba(20, 100, 200, 0.1); color: #1464C8; }
.blog-cat--ai       { background: rgba(120, 60, 200, 0.1); color: #783CC8; }
.blog-cat--marketing{ background: rgba(220, 120, 30, 0.12); color: #C8761E; }
.blog-cat--security { background: rgba(40, 120, 60, 0.1); color: #28783C; }

/* ---------- Filter pills ---------- */
.blog-filters {
    padding: 60px 0 40px;
    position: sticky;
    top: var(--nav-h);
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--grey-100);
}

.blog-filters__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.filter-pill {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--grey-200);
    background: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grey-700);
    cursor: pointer;
    transition:
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        border-color 0.3s var(--ease),
        transform 0.3s var(--ease);
}

.filter-pill:hover {
    border-color: var(--red);
    color: var(--red);
    transform: translateY(-2px);
}

.filter-pill.is-active {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    box-shadow: 0 6px 16px -6px rgba(209, 10, 17, 0.5);
}

/* ---------- Featured post ---------- */
.blog-featured {
    padding: 50px 0 0;
    background: var(--white);
}

.blog-featured__card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.blog-featured__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}

.blog-featured__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--grey-100);
}

.blog-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.blog-featured__card:hover .blog-featured__media img { transform: scale(1.06); }

.blog-featured__badge {
    position: absolute;
    top: 18px; left: 18px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--red);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -6px rgba(209, 10, 17, 0.5);
}

.blog-featured__content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.blog-featured__content > .blog-cat { align-self: flex-start; }

.blog-featured__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--black);
    transition: color 0.3s var(--ease);
}

.blog-featured__card:hover .blog-featured__title { color: var(--red); }

.blog-featured__excerpt {
    font-size: 1rem;
    color: var(--grey-700);
    line-height: 1.65;
}

.blog-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--grey-500);
    padding-top: 18px;
    border-top: 1px solid var(--grey-100);
}

.blog-meta__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink);
}

.blog-meta__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
}

.blog-meta__dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--grey-300);
}

.blog-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-weight: 600;
    color: var(--red);
    font-size: 0.9rem;
    transition: gap 0.3s var(--ease);
}

.blog-featured__card:hover .blog-featured__cta { gap: 12px; }

/* ---------- Posts grid ---------- */
.blog-grid-wrap {
    padding: 90px 0 110px;
    background: var(--white);
}

.section__head--left { text-align: left; max-width: none; margin: 0 0 40px; }
.section__head--left .eyebrow { justify-content: flex-start; }
.section__head--left .section__lede,
.section__head--left .section__title { margin-left: 0; margin-right: 0; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-grid__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--grey-500);
    font-size: 1rem;
    display: none;
}

.blog-grid-wrap.is-empty #blogGridEmpty { display: block; }

.blog-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.5s var(--ease),
        opacity 0.4s var(--ease);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}

.blog-card.is-hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

.blog-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--grey-100);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.blog-card:hover .blog-card__media img { transform: scale(1.08); }

.blog-card__media .blog-cat {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

.blog-card__body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}

.blog-card__body h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
    letter-spacing: -0.015em;
    transition: color 0.3s var(--ease);
}

.blog-card:hover .blog-card__body h3 { color: var(--red); }

.blog-card__body p {
    font-size: 0.92rem;
    color: var(--grey-700);
    line-height: 1.55;
    flex: 1;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--grey-500);
    padding-top: 14px;
    border-top: 1px solid var(--grey-100);
    margin-top: 4px;
}

/* ---------- Newsletter ---------- */
.newsletter {
    padding: 110px 0;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
}

.newsletter__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 28px;
    padding: 60px;
    overflow: hidden;
}

.newsletter__bg { position: absolute; inset: 0; pointer-events: none; }
.newsletter__shape {
    position: absolute;
    width: 500px; height: 500px;
    top: -180px; right: -180px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.1) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(40px);
}

.newsletter__content { position: relative; z-index: 1; }

.newsletter__content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--black);
    margin: 6px 0 14px;
}

.newsletter__content p {
    font-size: 1rem;
    color: var(--grey-700);
    line-height: 1.6;
}

.newsletter__form {
    position: relative;
    z-index: 1;
}

.newsletter__field {
    display: flex;
    align-items: center;
    background: var(--grey-50);
    border: 1.5px solid var(--grey-200);
    border-radius: 999px;
    padding: 5px;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.newsletter__field:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(209, 10, 17, 0.12);
}

.newsletter__field input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    outline: none;
}

.newsletter__field input::placeholder { color: var(--grey-500); }
.newsletter__field button { flex-shrink: 0; }

.newsletter__note {
    display: block;
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--grey-500);
    text-align: center;
}

.newsletter__honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none;
}

.newsletter__error {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(209, 10, 17, 0.08);
    border: 1px solid rgba(209, 10, 17, 0.25);
    border-radius: 12px;
    color: var(--red);
    font-size: 0.85rem;
    text-align: center;
}

.newsletter__error a { color: inherit; text-decoration: underline; }

#newsletterSubmit:disabled {
    opacity: 0.7;
    cursor: progress;
    transform: none !important;
}

.newsletter__success {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 26px 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.06) 0%, var(--grey-50) 100%);
    border: 1px solid var(--grey-200);
    animation: newsletterSuccessIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter__success-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 10px 22px -8px rgba(209, 10, 17, 0.5);
}
.newsletter__success-icon svg { width: 22px; height: 22px; }

.newsletter__success strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.015em;
}

.newsletter__success span {
    font-size: 0.92rem;
    color: var(--grey-700);
    line-height: 1.5;
}

@keyframes newsletterSuccessIn {
    0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Article modal ---------- */
.post-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

.post-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.post-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.post-modal__panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 60px);
    background: var(--white);
    border-radius: 24px;
    overflow: hidden auto;
    box-shadow: 0 40px 100px -20px rgba(10, 10, 10, 0.5);
    transition: transform 0.45s var(--ease), opacity 0.4s var(--ease);
    overscroll-behavior: contain;
}

.post-modal.is-open .post-modal__panel {
    transform: translate(-50%, -50%) scale(1);
}

.post-modal__close {
    position: sticky;
    top: 18px;
    margin-left: auto;
    margin-right: 18px;
    margin-top: 18px;
    width: 40px; height: 40px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 50%;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow);
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
    float: right;
}

.post-modal__close:hover {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
    transform: rotate(90deg);
}

.post-modal__body {
    padding: 30px 56px 56px;
    clear: both;
}

.post-modal__body article > .post__cat {
    margin-bottom: 20px;
}

.post-modal__body h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--black);
    margin-bottom: 18px;
}

.post-modal__body .post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--grey-500);
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--grey-200);
}

.post-modal__body img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 28px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


.post-modal__body .post__lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 28px;
    padding: 22px;
    background: var(--grey-50);
    border-left: 3px solid var(--red);
    border-radius: 6px;
}

.post-modal__body h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--black);
    margin: 32px 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.post-modal__body p {
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.75;
    margin-bottom: 18px;
}

.post-modal__body strong { color: var(--black); font-weight: 700; }

.post-modal__body .post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--grey-200);
}

.post-modal__body .post__tags span {
    padding: 6px 12px;
    background: var(--grey-100);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--grey-700);
}

.post-modal__body .post__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.05), var(--grey-50));
    border-radius: 16px;
    border: 1px solid var(--grey-200);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .blog-featured__card { grid-template-columns: 1fr; }
    .blog-featured__media { aspect-ratio: 16 / 9; }
    .blog-featured__content { padding: 36px 32px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter__inner { grid-template-columns: 1fr; padding: 40px; gap: 30px; }
}

@media (max-width: 720px) {
    .blog-hero { padding: calc(var(--nav-h) + 50px) 0 60px; }
    .blog-hero__stats { gap: 24px; padding: 18px 24px; }
    .blog-hero__stat strong { font-size: 1.3rem; }
    .blog-filters { padding: 32px 0 24px; }
    .blog-filters__bar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 4px 6px; -webkit-overflow-scrolling: touch; }
    .filter-pill { white-space: nowrap; flex-shrink: 0; }
    .blog-grid { grid-template-columns: 1fr; gap: 22px; }
    .blog-grid-wrap { padding: 50px 0 70px; }
    .newsletter { padding: 70px 0; }
    .newsletter__inner { padding: 32px 24px; }
    .post-modal__body { padding: 20px 24px 40px; }
    .post-modal__close { top: 14px; margin-right: 14px; margin-top: 14px; }
    .post-modal__body .post__lead { padding: 16px; font-size: 1rem; }
    .post-modal__body .post__cta-row { padding: 20px; flex-direction: column; }
    .post-modal__body .post__cta-row .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* ---------- Active nav state ---------- */
.nav__links a.is-active {
    color: var(--red);
}
.nav__links a.is-active::after {
    width: 100%;
}

/* ---------- Hero ---------- */
.about-hero {
    position: relative;
    padding: calc(var(--nav-h) + 90px) 0 100px;
    background: radial-gradient(ellipse at top, var(--white) 0%, #FBFBFB 60%, var(--grey-50) 100%);
    text-align: center;
    overflow: hidden;
}

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

.about-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
    will-change: transform;
}

.about-hero__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.about-hero__shape--1 {
    width: 460px; height: 460px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, var(--red) 0%, transparent 65%);
    opacity: 0.16;
    animation: floatA 18s ease-in-out infinite;
}
.about-hero__shape--2 {
    width: 360px; height: 360px;
    bottom: -100px; right: -100px;
    background: radial-gradient(circle, var(--red-bright) 0%, transparent 65%);
    opacity: 0.12;
    animation: floatB 24s ease-in-out infinite;
}

.about-hero__glow {
    position: absolute;
    width: 800px; height: 600px;
    top: 20%;
    left: 50%;
    margin-left: -400px;
    background: radial-gradient(ellipse, rgba(209, 10, 17, 0.05) 0%, transparent 65%);
    will-change: transform;
}

.about-hero__inner { position: relative; z-index: 1; }

.about-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--black);
    margin-bottom: 24px;
}

.about-hero__lede {
    max-width: 680px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--grey-700);
    line-height: 1.65;
    margin-bottom: 32px;
}

.about-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--grey-700);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.chip:hover { border-color: var(--red); color: var(--red); background: var(--white); }

.chip__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(209, 10, 17, 0.6);
    animation: pulse 2.4s ease-in-out infinite;
}

/* ---------- Founder section ---------- */
.about-founder {
    padding: 130px 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.about-founder__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 80px;
    align-items: center;
}

.about-founder__media {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.about-founder__photo {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: var(--grey-100);
    aspect-ratio: 4 / 5;
    box-shadow: 0 30px 70px -20px rgba(10, 10, 10, 0.25);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.about-founder__photo:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px -20px rgba(10, 10, 10, 0.3);
}

.about-founder__photo-bg {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.08) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
}

.about-founder__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    position: relative;
    z-index: 0;
    transition: transform 1.2s var(--ease);
}
.about-founder__photo:hover img { transform: scale(1.04); }

.about-founder__caption {
    position: absolute;
    left: 24px; bottom: 22px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -10px rgba(10, 10, 10, 0.25);
}

.about-founder__caption-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--black);
    letter-spacing: -0.01em;
}

.about-founder__caption-role {
    font-size: 0.8rem;
    color: var(--red);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}

.about-founder__credential {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    background: var(--white);
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.about-founder__credential:hover {
    border-color: var(--red);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.about-founder__credential img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.about-founder__credential div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.about-founder__credential-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grey-500);
}

.about-founder__credential strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.005em;
}

.about-founder__credential-detail {
    font-size: 0.85rem;
    color: var(--grey-700);
}

.about-founder__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--black);
    margin-bottom: 22px;
}

.about-founder__lead {
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    color: var(--ink);
    line-height: 1.6;
    margin-bottom: 18px;
    font-weight: 500;
}
.about-founder__lead strong { color: var(--red); font-weight: 700; }

.about-founder__body {
    font-size: 1rem;
    color: var(--grey-700);
    line-height: 1.7;
    margin-bottom: 16px;
}
.about-founder__body strong { color: var(--ink); font-weight: 600; }

.about-founder__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--grey-200);
}

.about-founder__stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}

.about-founder__stat-label {
    font-size: 0.82rem;
    color: var(--grey-500);
    font-weight: 500;
    line-height: 1.4;
}

/* ---------- Local pride ---------- */
.about-local {
    position: relative;
    padding: 120px 0;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
    overflow: hidden;
}

.about-local__bg { position: absolute; inset: 0; pointer-events: none; }

.about-local__shape {
    position: absolute;
    width: 560px; height: 560px;
    top: -180px; left: 50%;
    margin-left: -280px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.06) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(50px);
    will-change: transform;
}

.about-local__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    position: relative;
    z-index: 1;
}

.about-local__card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 38px 32px;
    text-align: center;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.about-local__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}

.about-local__icon {
    width: 56px; height: 56px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--grey-100);
    color: var(--red);
    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.about-local__icon svg { width: 26px; height: 26px; }

.about-local__card:hover .about-local__icon {
    background: var(--red);
    color: var(--white);
    transform: rotate(-6deg) scale(1.05);
}

.about-local__card h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
}

.about-local__card p {
    font-size: 0.95rem;
    color: var(--grey-700);
    line-height: 1.6;
}

/* ---------- Values ---------- */
.about-values {
    padding: 120px 0;
    background: var(--white);
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.value-card {
    position: relative;
    padding: 44px 36px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
    overflow: hidden;
    isolation: isolate;
}

.value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(209, 10, 17, 0.08) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: -1;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}
.value-card:hover::before { opacity: 1; }

.value-card.value-card--featured {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}
.value-card.value-card--featured h3 { color: var(--white); }
.value-card.value-card--featured p  { color: rgba(255, 255, 255, 0.78); }
.value-card.value-card--featured .value-card__num { color: var(--red-bright); }
.value-card.value-card--featured .value-card__line { background: var(--red); }

.value-card__num {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.1em;
    margin-bottom: 22px;
    display: block;
}

.value-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.value-card p {
    font-size: 0.96rem;
    color: var(--grey-700);
    line-height: 1.65;
    margin-bottom: 28px;
}

.value-card__line {
    height: 3px;
    width: 40px;
    background: var(--red);
    border-radius: 3px;
    transition: width 0.5s var(--ease);
}
.value-card:hover .value-card__line { width: 80px; }

/* ---------- Mission / Vision / Approach ---------- */
.about-mva {
    padding: 120px 0;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
}

.mva-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.mva-card {
    position: relative;
    padding: 44px 36px;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--grey-200);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    overflow: hidden;
}

.mva-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 4px;
    width: 100%;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}
.mva-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.mva-card:hover::after { transform: scaleX(1); }

.mva-card__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 22px;
}
.mva-card__label::before {
    content: '';
    width: 24px; height: 1.5px;
    background: var(--red);
}

.mva-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
.mva-card h3 em {
    font-style: italic;
    font-weight: 500;
    color: var(--red);
}

.mva-card p {
    font-size: 0.96rem;
    color: var(--grey-700);
    line-height: 1.7;
}

.mva-card--vision { background: linear-gradient(160deg, var(--white) 0%, #FBFBFB 100%); }
.mva-card--approach::after { background: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .about-founder__grid { grid-template-columns: 1fr; gap: 60px; }
    .about-founder__media { max-width: 480px; margin: 0 auto; width: 100%; }
    .about-local__grid,
    .about-values__grid,
    .mva-grid { grid-template-columns: 1fr; }
    .about-founder { padding: 90px 0; }
    .about-local,
    .about-values,
    .about-mva { padding: 90px 0; }
}

@media (max-width: 720px) {
    .about-hero { padding: calc(var(--nav-h) + 50px) 0 70px; }
    .about-founder { padding: 70px 0; }
    .about-founder__photo { aspect-ratio: 1 / 1.1; }
    .about-founder__stats { grid-template-columns: 1fr; gap: 18px; padding-top: 24px; margin-top: 28px; }
    .about-local,
    .about-values,
    .about-mva { padding: 70px 0; }
    .value-card,
    .mva-card { padding: 36px 28px; }
}

/* =========================================================
   QUOTE PAGE
   ========================================================= */
.quote-header {
    position: relative;
    padding: calc(var(--nav-h) + 80px) 0 70px;
    background: radial-gradient(ellipse at top, var(--white) 0%, var(--grey-50) 100%);
    text-align: center;
    overflow: hidden;
}

.quote-header__bg { position: absolute; inset: 0; pointer-events: none; }

.quote-header__shape {
    position: absolute;
    width: 600px; height: 600px;
    top: -200px; left: 50%;
    margin-left: -300px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.07) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(40px);
}

.quote-header__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
}

.quote-header__inner { position: relative; z-index: 1; }

.quote-header__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--black);
    margin-bottom: 22px;
}

.quote-header__lede {
    max-width: 600px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--grey-700);
    line-height: 1.65;
}

/* ---------- Form section ---------- */
.quote-section {
    padding: 60px 0 110px;
    background: var(--white);
}

.quote-form {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    padding: 50px 50px 44px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--grey-200);
    box-shadow: var(--shadow-lg);
}

.quote-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.quote-form__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.quote-form__row .quote-form__field { margin-bottom: 0; }

.quote-form__field span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 9px;
    letter-spacing: 0.005em;
}

.quote-form__field span em {
    color: var(--red);
    font-style: normal;
    margin-left: 2px;
}

.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--grey-200);
    border-radius: 12px;
    padding: 14px 16px;
    width: 100%;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

.quote-form__field input::placeholder,
.quote-form__field textarea::placeholder { color: var(--grey-500); }

.quote-form__field input:hover,
.quote-form__field select:hover,
.quote-form__field textarea:hover {
    border-color: var(--grey-300);
}

.quote-form__field input:focus,
.quote-form__field select:focus,
.quote-form__field textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(209, 10, 17, 0.12);
}

.quote-form__field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    cursor: pointer;
}

.quote-form__field textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.55;
    font-family: inherit;
}

.quote-form__submit {
    width: 100%;
    margin-top: 14px;
    justify-content: center;
}

.quote-form__note {
    margin-top: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--grey-500);
}

.quote-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.quote-form__submit[disabled],
.quote-form__submit.is-loading {
    opacity: 0.7;
    cursor: progress;
    pointer-events: none;
}

.quote-form__submit.is-loading .quote-form__submit-icon {
    animation: quoteFormSpin 0.9s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes quoteFormSpin {
    to { transform: rotate(360deg); }
}

.quote-form__error {
    margin-top: 14px;
    padding: 14px 18px;
    background: rgba(209, 10, 17, 0.08);
    border: 1px solid rgba(209, 10, 17, 0.25);
    border-radius: var(--radius-md);
    color: var(--red);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.5;
}

.quote-form__error a {
    color: var(--red);
    font-weight: 600;
    text-decoration: underline;
}

.quote-form--success {
    text-align: center;
    padding: 56px 40px;
}

.quote-form__success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.quote-form__success-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.quote-form__success-text {
    font-size: 1rem;
    color: var(--grey-700);
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto 28px;
}

/* ---------- Next steps ---------- */
.next-steps {
    padding: 100px 0 120px;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
}

.next-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.next-steps__card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding: 36px 30px;
    text-align: center;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.next-steps__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.next-steps__num {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--red);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 auto 22px;
    box-shadow: 0 6px 18px -6px rgba(209, 10, 17, 0.5);
}

.next-steps__card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 10px;
    letter-spacing: -0.015em;
}

.next-steps__card p {
    font-size: 0.95rem;
    color: var(--grey-700);
    line-height: 1.6;
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--black);
    color: var(--white);
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    z-index: 200;
}

.toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast svg { color: var(--red); flex-shrink: 0; }

@media (max-width: 720px) {
    .quote-header { padding: calc(var(--nav-h) + 50px) 0 50px; }
    .quote-section { padding: 40px 0 80px; }
    .quote-form { padding: 32px 24px; }
    .quote-form__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    .quote-form__row .quote-form__field { margin-bottom: 22px; }
    .next-steps { padding: 70px 0 80px; }
    .next-steps__grid { grid-template-columns: 1fr; }
    .toast { left: 16px; right: 16px; transform: translateY(20px); width: auto; bottom: 16px; }
    .toast.is-show { transform: translateY(0); }
}

/* =========================================================
   PRICING PAGE
   ========================================================= */

/* ---------- Scroll progress ---------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 200;
    background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 100%);
    box-shadow: 0 0 18px rgba(209, 10, 17, 0.55);
    pointer-events: none;
    transition: width 0.08s linear;
}

/* ---------- Hero ---------- */
.pricing-hero {
    position: relative;
    padding: calc(var(--nav-h) + 90px) 0 110px;
    background: radial-gradient(ellipse at top, var(--white) 0%, #FBFBFB 60%, var(--grey-50) 100%);
    text-align: center;
    overflow: hidden;
}

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

.pricing-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
    will-change: transform;
}

.pricing-hero__shape { position: absolute; border-radius: 50%; filter: blur(60px); }
.pricing-hero__shape--1 {
    width: 480px; height: 480px;
    top: -130px; left: -130px;
    background: radial-gradient(circle, var(--red) 0%, transparent 65%);
    opacity: 0.18;
    animation: floatA 20s ease-in-out infinite;
}
.pricing-hero__shape--2 {
    width: 380px; height: 380px;
    bottom: -110px; right: -100px;
    background: radial-gradient(circle, var(--red-bright) 0%, transparent 65%);
    opacity: 0.14;
    animation: floatB 24s ease-in-out infinite;
}
.pricing-hero__shape--3 {
    width: 280px; height: 280px;
    top: 25%; right: 15%;
    background: radial-gradient(circle, var(--black) 0%, transparent 65%);
    opacity: 0.04;
    animation: floatA 28s ease-in-out infinite reverse;
}

.pricing-hero__glow {
    position: absolute;
    width: 800px; height: 600px;
    top: 20%; left: 50%;
    margin-left: -400px;
    background: radial-gradient(ellipse, rgba(209, 10, 17, 0.05) 0%, transparent 65%);
    will-change: transform;
}

/* Concentric orbits behind the hero */
.pricing-hero__orbits {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -45%);
    width: 1100px; height: 1100px;
    pointer-events: none;
    opacity: 0.5;
}
.pricing-hero__orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    border: 1px dashed rgba(209, 10, 17, 0.18);
    border-radius: 50%;
}
.pricing-hero__orbit--1 { width: 380px; height: 380px; animation: orbitSpin 45s linear infinite; }
.pricing-hero__orbit--2 { width: 640px; height: 640px; animation: orbitSpin 70s linear infinite reverse; border-color: rgba(10,10,10,0.06); }
.pricing-hero__orbit--3 { width: 980px; height: 980px; animation: orbitSpin 110s linear infinite; border-color: rgba(209, 10, 17, 0.1); }

.pricing-hero__orbit::before {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 14px rgba(209, 10, 17, 0.6);
    transform: translateX(-50%);
}

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.pricing-hero__inner { position: relative; z-index: 1; }

.pricing-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--black);
    margin-bottom: 24px;
}

.pricing-hero__lede {
    max-width: 760px;
    margin: 0 auto 36px;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: var(--grey-700);
    line-height: 1.65;
}

.pricing-hero__lede strong { color: var(--ink); font-weight: 600; }

/* Scope toggle */
.pricing-hero__scope {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
}

.pricing-hero__scope-label,
.pricing-hero__scope-hint {
    font-size: 0.85rem;
    color: var(--grey-700);
    font-weight: 500;
}
.pricing-hero__scope-hint { color: var(--grey-500); font-size: 0.82rem; }

.scope-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 5px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    box-shadow: 0 12px 32px -16px rgba(10, 10, 10, 0.18);
    backdrop-filter: blur(10px);
}

.scope-toggle__pill {
    position: absolute;
    top: 5px; bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / 3);
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    border-radius: 999px;
    box-shadow: 0 8px 22px -8px rgba(209, 10, 17, 0.55);
    transition: transform 0.55s var(--ease);
    z-index: 0;
}

.scope-toggle[data-scope="starter"]  .scope-toggle__pill { transform: translateX(0); }
.scope-toggle[data-scope="standard"] .scope-toggle__pill { transform: translateX(100%); }
.scope-toggle[data-scope="premium"]  .scope-toggle__pill { transform: translateX(200%); }

.scope-toggle__btn {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 110px;
    padding: 11px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--grey-700);
    border-radius: 999px;
    transition: color 0.4s var(--ease);
    white-space: nowrap;
    text-align: center;
}

.scope-toggle__btn.is-active { color: var(--white); }
.scope-toggle__btn:not(.is-active):hover { color: var(--red); }

.pricing-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 60px;
}

.pricing-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--grey-200);
}

.pricing-hero__stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.pricing-hero__stat-label {
    font-size: 0.82rem;
    color: var(--grey-500);
    font-weight: 500;
    line-height: 1.4;
}

/* ---------- Promise band ---------- */
.pricing-promise {
    padding: 110px 0 90px;
    background: var(--white);
    border-top: 1px solid var(--grey-100);
    position: relative;
}

.pricing-promise__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pricing-promise__card {
    position: relative;
    padding: 38px 32px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.pricing-promise__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: -1;
}

.pricing-promise__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--grey-300);
}

.pricing-promise__card:hover::before { opacity: 1; }

.pricing-promise__card--featured {
    background: linear-gradient(165deg, var(--black) 0%, var(--grey-900) 100%);
    border-color: var(--black);
    color: var(--white);
}
.pricing-promise__card--featured h3 { color: var(--white); }
.pricing-promise__card--featured p { color: rgba(255, 255, 255, 0.78); }
.pricing-promise__card--featured .pricing-promise__icon {
    background: rgba(255, 255, 255, 0.08);
    color: var(--red-bright);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-promise__icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--grey-100);
    color: var(--red);
    margin-bottom: 22px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.pricing-promise__icon svg { width: 26px; height: 26px; }
.pricing-promise__card:hover .pricing-promise__icon {
    transform: rotate(-6deg) scale(1.05);
}

.pricing-promise__card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
}
.pricing-promise__card h3 em { font-style: italic; color: var(--red); font-weight: 600; }
.pricing-promise__card--featured h3 em { color: var(--red-bright); }

.pricing-promise__card p {
    font-size: 0.95rem;
    color: var(--grey-700);
    line-height: 1.65;
}

/* ---------- Pricing grid ---------- */
.pricing-grid-section {
    position: relative;
    padding: 110px 0 130px;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
    overflow: hidden;
}

.pricing-grid-section__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pricing-grid-section__shape {
    position: absolute;
    width: 700px; height: 700px;
    top: -200px; left: 50%;
    margin-left: -350px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.06) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(50px);
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    position: relative;
    z-index: 1;
}

.price-card {
    position: relative;
    padding: 36px 30px 32px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.55s var(--ease),
        box-shadow 0.55s var(--ease),
        border-color 0.55s var(--ease);
    display: flex;
    flex-direction: column;
}

.price-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(209, 10, 17, 0.07) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: -1;
    pointer-events: none;
}

.price-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--red), var(--red-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}

.price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -20px rgba(10, 10, 10, 0.22);
    border-color: var(--grey-300);
}
.price-card:hover::before { opacity: 1; }
.price-card:hover::after  { transform: scaleX(1); }

/* Featured (flagship) card uses dark theme */
.price-card--feature {
    background: linear-gradient(165deg, var(--black) 0%, var(--grey-900) 100%);
    border-color: var(--black);
    color: var(--white);
}
.price-card--feature .price-card__title,
.price-card--feature .price-card__price-num,
.price-card--feature .price-card__amount,
.price-card--feature .price-card__currency { color: var(--white); }
.price-card--feature .price-card__sub,
.price-card--feature .price-card__why,
.price-card--feature .price-card__includes li { color: rgba(255, 255, 255, 0.75); }
.price-card--feature .price-card__why strong { color: var(--white); }
.price-card--feature .price-card__range { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.price-card--feature .price-card__range-label { color: rgba(255, 255, 255, 0.55); }
.price-card--feature .price-card__range-value { color: var(--white); }
.price-card--feature .price-card__bar { background: rgba(255, 255, 255, 0.1); }
.price-card--feature .price-card__price-from,
.price-card--feature .price-card__price-suffix { color: rgba(255, 255, 255, 0.65); }
.price-card--feature .price-card__icon { background: rgba(255, 255, 255, 0.1); color: var(--red-bright); border: 1px solid rgba(255, 255, 255, 0.12); }
.price-card--feature .price-card__tag { color: rgba(255, 255, 255, 0.45); }
.price-card--feature .price-card__cta { color: var(--red-bright); }
.price-card--feature .price-card__includes li::before { background: rgba(209, 10, 17, 0.45); border-color: var(--red-bright); }
.price-card--feature::after { background: linear-gradient(90deg, var(--red-bright), #ffd1d4); }

/* Ribbon */
.price-card__ribbon {
    position: absolute;
    top: 16px; right: -40px;
    z-index: 2;
    padding: 6px 50px;
    background: var(--red);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(35deg);
    box-shadow: 0 8px 22px -8px rgba(209, 10, 17, 0.55);
}
.price-card__ribbon--dark { background: var(--white); color: var(--black); box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45); }

.price-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.price-card__icon {
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--grey-100);
    color: var(--red);
    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.price-card__icon svg { width: 24px; height: 24px; }
.price-card:hover .price-card__icon {
    background: var(--red);
    color: var(--white);
    transform: rotate(-6deg) scale(1.05);
}
.price-card--feature:hover .price-card__icon {
    background: var(--red);
    color: var(--white);
}

.price-card__tag {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--grey-500);
    letter-spacing: 0.1em;
}

.price-card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.018em;
    line-height: 1.15;
    margin-bottom: 10px;
}

.price-card__sub {
    font-size: 0.92rem;
    color: var(--grey-700);
    line-height: 1.55;
    margin-bottom: 24px;
}

.price-card__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.price-card__price-from {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grey-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.price-card__price-num {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.03em;
    line-height: 1;
}

.price-card__currency {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--red);
    margin-right: 2px;
}

.price-card__amount {
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    transition: color 0.3s var(--ease);
}

.price-card.is-counting .price-card__amount {
    color: var(--red);
}

.price-card__price-suffix {
    font-size: 0.8rem;
    color: var(--grey-500);
    font-weight: 500;
}

.price-card__range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.84rem;
}

.price-card__range-label {
    color: var(--grey-500);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.price-card__range-value {
    color: var(--ink);
    font-weight: 600;
    font-family: var(--font-display);
}

.price-card__bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--grey-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 22px;
}

.price-card__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 100%);
    box-shadow: 0 0 10px rgba(209, 10, 17, 0.4);
    transition: width 0.65s var(--ease);
}

.price-card__why {
    font-size: 0.9rem;
    color: var(--grey-700);
    line-height: 1.65;
    margin-bottom: 22px;
}
.price-card__why strong {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 8px;
}
.price-card__why em { font-style: italic; color: var(--ink); font-weight: 500; }

.price-card__includes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 26px;
    padding-top: 18px;
    border-top: 1px dashed var(--grey-200);
}
.price-card--feature .price-card__includes { border-top-color: rgba(255, 255, 255, 0.12); }

.price-card__includes li {
    position: relative;
    padding-left: 22px;
    font-size: 0.9rem;
    color: var(--grey-700);
    line-height: 1.5;
}
.price-card__includes li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(209, 10, 17, 0.12);
    border: 1.5px solid var(--red);
    box-shadow: inset 0 0 0 3px var(--white);
}

.price-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--red);
    transition: gap 0.35s var(--ease), color 0.35s var(--ease);
}
.price-card__cta svg { transition: transform 0.35s var(--ease); }
.price-card:hover .price-card__cta { gap: 12px; }
.price-card:hover .price-card__cta svg { transform: translateX(4px); }

/* Disclaimer banner */
.pricing-disclaimer {
    margin-top: 46px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.04) 0%, rgba(255, 255, 255, 0.7) 100%);
    border: 1px solid rgba(209, 10, 17, 0.18);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 36px -16px rgba(209, 10, 17, 0.18);
}

.pricing-disclaimer__icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(209, 10, 17, 0.12);
    color: var(--red);
}
.pricing-disclaimer__icon svg { width: 22px; height: 22px; }

.pricing-disclaimer__body { display: flex; flex-direction: column; gap: 4px; }
.pricing-disclaimer__body strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.01em;
}
.pricing-disclaimer__body span {
    font-size: 0.92rem;
    color: var(--grey-700);
    line-height: 1.6;
}

/* ---------- Estimator ---------- */
.estimator {
    position: relative;
    padding: 130px 0;
    background: linear-gradient(180deg, var(--black) 0%, #131313 100%);
    color: var(--white);
    overflow: hidden;
}

.estimator__bg { position: absolute; inset: 0; pointer-events: none; }
.estimator__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.estimator__shape--1 {
    width: 700px; height: 700px;
    top: -260px; left: -200px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.5) 0%, transparent 65%);
    animation: floatA 22s ease-in-out infinite;
}
.estimator__shape--2 {
    width: 520px; height: 520px;
    bottom: -200px; right: -180px;
    background: radial-gradient(circle, rgba(255, 26, 34, 0.35) 0%, transparent 65%);
    animation: floatB 26s ease-in-out infinite;
}

.estimator .section__head { position: relative; z-index: 1; }

.estimator__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--white);
    margin-bottom: 18px;
}

.estimator__lede {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 660px;
    margin: 0 auto;
}

.estimator__panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.55);
}

.estimator__form {
    padding: 44px 44px 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.estimator__group {
    padding: 22px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.estimator__group:first-child { padding-top: 0; }
.estimator__group:last-child { border-bottom: 0; padding-bottom: 0; }

.estimator__label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
    letter-spacing: -0.005em;
}

.estimator__label-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(209, 10, 17, 0.18);
    color: var(--red-bright);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

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

.est-chip {
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    transition:
        background 0.35s var(--ease),
        color 0.35s var(--ease),
        border-color 0.35s var(--ease),
        transform 0.35s var(--ease),
        box-shadow 0.35s var(--ease);
}
.est-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
    transform: translateY(-2px);
}
.est-chip.is-active {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    border-color: var(--red);
    color: var(--white);
    box-shadow: 0 12px 28px -10px rgba(209, 10, 17, 0.6);
}

/* Result panel */
.estimator__result {
    position: relative;
    padding: 44px 44px 50px;
    background:
        radial-gradient(circle at 80% 0%, rgba(209, 10, 17, 0.18) 0%, transparent 50%),
        rgba(0, 0, 0, 0.35);
}

.estimator__result-inner { position: relative; z-index: 1; }

.estimator__result-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-bright);
    margin-bottom: 16px;
}

.estimator__result-num {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.035em;
    line-height: 1;
    margin-bottom: 14px;
}
.estimator__currency {
    font-size: 1.3rem;
    color: var(--red-bright);
    font-weight: 600;
    transform: translateY(-4px);
}
.estimator__low,
.estimator__high {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s var(--ease);
}

.estimator__sep {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    padding: 0 4px;
}

.estimator__result-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 26px;
}
.estimator__result-vat {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
}
.estimator__result-conf {
    font-size: 0.78rem;
    color: var(--red-bright);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.estimator__summary {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    padding: 4px 0;
}
.estimator__summary li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.88rem;
}
.estimator__summary li:last-child { border-bottom: 0; }
.estimator__summary li span {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.74rem;
}
.estimator__summary li strong {
    color: var(--white);
    font-weight: 600;
    font-family: var(--font-display);
    text-align: right;
    line-height: 1.3;
}

.estimator__cta { width: 100%; }
.estimator__disclaimer {
    margin-top: 14px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    text-align: center;
}

.estimator.is-pulsing .estimator__low,
.estimator.is-pulsing .estimator__high {
    color: var(--red-bright);
}

/* ---------- What affects price ---------- */
.affects {
    padding: 130px 0;
    background: var(--white);
    border-top: 1px solid var(--grey-100);
}

.affects__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.affect {
    position: relative;
    padding: 32px 30px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}

.affect:hover {
    transform: translateY(-6px);
    background: var(--white);
    border-color: var(--grey-300);
    box-shadow: var(--shadow);
}

.affect__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.affect__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    color: var(--red);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
}

.affect__head h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.015em;
    margin-right: auto;
}

.affect__weight {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--red);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(209, 10, 17, 0.08);
}

.affect__bar {
    height: 6px;
    width: 100%;
    background: var(--grey-200);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 18px;
}

.affect__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 100%);
    transition: width 1.4s var(--ease) 0.1s;
}

.affect.is-in .affect__bar-fill {
    width: var(--fill-width, 0);
}

.affect p {
    font-size: 0.93rem;
    color: var(--grey-700);
    line-height: 1.65;
}

/* ---------- FAQ ---------- */
.pricing-faq {
    padding: 130px 0;
    background: var(--grey-50);
    border-top: 1px solid var(--grey-200);
}

.pricing-faq__list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

.faq-item[open] {
    border-color: var(--red);
    box-shadow: 0 16px 36px -18px rgba(209, 10, 17, 0.25);
    transform: translateY(-2px);
}
.faq-item:hover { border-color: var(--grey-300); }
.faq-item[open]:hover { border-color: var(--red); }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--red); }
.faq-item summary:hover { color: var(--red); }

.faq-item__icon {
    position: relative;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--grey-300);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.faq-item__icon span {
    position: absolute;
    top: 50%; left: 50%;
    width: 11px; height: 1.6px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.faq-item__icon span:nth-child(1) { transform: translate(-50%, -50%); }
.faq-item__icon span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item[open] .faq-item__icon {
    background: var(--red);
    border-color: var(--red);
    transform: rotate(180deg);
}
.faq-item[open] .faq-item__icon span { background: var(--white); }
.faq-item[open] .faq-item__icon span:nth-child(2) { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item__body {
    padding: 0 26px 24px;
    font-size: 0.95rem;
    color: var(--grey-700);
    line-height: 1.7;
    animation: faqSlide 0.45s var(--ease);
}

@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Pricing page responsive ---------- */
@media (max-width: 1024px) {
    .pricing-cards { grid-template-columns: repeat(2, 1fr); }
    .pricing-promise__grid { grid-template-columns: 1fr; }
    .estimator__panel { grid-template-columns: 1fr; }
    .estimator__form { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 36px 30px; }
    .estimator__result { padding: 36px 30px 40px; }
    .affects__grid { grid-template-columns: 1fr; }
    .pricing-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
    .pricing-hero { padding: calc(var(--nav-h) + 60px) 0 80px; }
    .pricing-grid-section,
    .pricing-promise,
    .estimator,
    .affects,
    .pricing-faq { padding: 90px 0; }
    .pricing-hero__orbits { display: none; }
}

@media (max-width: 720px) {
    .pricing-cards { grid-template-columns: 1fr; }
    .pricing-grid-section,
    .pricing-promise,
    .estimator,
    .affects,
    .pricing-faq { padding: 70px 0; }
    .pricing-hero { padding: calc(var(--nav-h) + 40px) 0 70px; }
    .pricing-hero__stats { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; }
    .pricing-disclaimer { flex-direction: column; align-items: flex-start; padding: 22px; gap: 16px; }
    .scope-toggle__btn { padding: 10px 18px; font-size: 0.85rem; }
    .price-card { padding: 30px 24px 28px; }
    .faq-item summary { padding: 18px 20px; font-size: 0.96rem; gap: 14px; }
    .faq-item__body { padding: 0 20px 20px; }
    .estimator__form,
    .estimator__result { padding: 28px 22px; }
    .affect { padding: 26px 22px; }
    .pricing-promise__card { padding: 32px 26px; }
}

/* =========================================================
   INDUSTRY CARDS — PHOTO TREATMENT (service detail pages)
   Extends the inline .industry-card styles on each service
   detail page to render a full-bleed industry photo behind
   each card's visual area, with a subtle dark overlay so the
   card title remains legible underneath.
   ========================================================= */
.industry-card__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s var(--ease);
    filter: saturate(0.92);
}

.industry-card:hover .industry-card__visual img {
    transform: scale(1.08);
    filter: saturate(1.05);
}

/* Soft dark gradient at the bottom edge of the visual for legibility */
.industry-card__visual {
    position: relative;
}

.industry-card__visual > .industry-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0) 50%,
        rgba(10, 10, 10, 0.55) 100%
    );
    pointer-events: none;
}

/* When a photo is present, hide the inline decorative grid + radial
   overlays so they don't sit on top of the image. */
.industry-card__visual:has(img)::before,
.industry-card__visual:has(img)::after {
    display: none;
}

/* =========================================================
   PROCESS TIMELINE (service detail pages)
   ========================================================= */
.process-timeline {
    position: relative;
    max-width: 780px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Vertical connector line — visible in gaps between cards */
.process-timeline::before {
    content: '';
    position: absolute;
    top: 62px;
    bottom: 62px;
    left: 60px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--red) 0%,
        rgba(209, 10, 17, 0.55) 50%,
        rgba(209, 10, 17, 0.15) 100%
    );
    border-radius: 2px;
    z-index: 0;
}

.process-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 36px 40px 36px 32px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.55s var(--ease),
        box-shadow 0.55s var(--ease),
        border-color 0.55s var(--ease);
}

.process-step::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 0%) var(--my, 0%),
        rgba(209, 10, 17, 0.08) 0%,
        transparent 55%
    );
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: -1;
    pointer-events: none;
}

.process-step::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--red), var(--red-bright));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s var(--ease);
}

.process-step:hover {
    transform: translateX(10px);
    border-color: var(--grey-300);
    box-shadow: 0 28px 56px -22px rgba(10, 10, 10, 0.22);
}
.process-step:hover::before { opacity: 1; }
.process-step:hover::after { transform: scaleY(1); }

.process-step__num {
    flex-shrink: 0;
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
    box-shadow: 0 12px 28px -8px rgba(209, 10, 17, 0.5);
    transition:
        transform 0.55s var(--ease),
        box-shadow 0.55s var(--ease);
}

.process-step__num::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--red);
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.55s var(--ease),
        transform 0.55s var(--ease);
}

.process-step__num::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.55s var(--ease);
    mix-blend-mode: overlay;
}

.process-step:hover .process-step__num {
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 20px 40px -8px rgba(209, 10, 17, 0.65);
}
.process-step:hover .process-step__num::before {
    opacity: 1;
    transform: scale(1.08);
}
.process-step:hover .process-step__num::after { opacity: 1; }

.process-step__body {
    flex: 1;
    min-width: 0;
    padding-top: 6px;
}

.process-step__body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    transition: color 0.4s var(--ease);
}

.process-step:hover .process-step__body h3 {
    color: var(--red);
}

.process-step__body p {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    color: var(--grey-700);
    line-height: 1.7;
    margin: 0;
}

.process-step__arrow {
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--grey-200);
    color: var(--grey-500);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.4s var(--ease),
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        color 0.4s var(--ease),
        background 0.4s var(--ease);
}

.process-step__arrow svg {
    width: 14px;
    height: 14px;
    transition: transform 0.4s var(--ease);
}

.process-step:hover .process-step__arrow {
    opacity: 1;
    transform: translateX(0);
    border-color: var(--red);
    color: var(--red);
    background: rgba(209, 10, 17, 0.08);
}
.process-step:hover .process-step__arrow svg {
    transform: translateX(3px);
}

@media (max-width: 720px) {
    .process-timeline { gap: 18px; margin-top: 40px; }
    .process-timeline::before { top: 50px; bottom: 50px; left: 48px; }
    .process-step {
        padding: 26px 24px 26px 22px;
        gap: 20px;
        border-radius: 18px;
    }
    .process-step__num {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }
    .process-step:hover { transform: translateX(4px); }
    .process-step__arrow { display: none; }
}

/* =========================================================
   CRAFT SECTIONS (Speed & Perfection)
   ========================================================= */
.craft-section {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
}

.craft-section--speed {
    background: radial-gradient(ellipse at top, var(--white) 0%, #FBFBFB 60%, var(--grey-50) 100%);
    border-top: 1px solid var(--grey-100);
}

.craft-section--perfection {
    background: linear-gradient(180deg, var(--black) 0%, #111 100%);
    color: var(--white);
}

.craft-section__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.craft-section__inner { position: relative; z-index: 1; }

/* ---------- Speed background streaks ---------- */
.craft-streak {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(209, 10, 17, 0.35) 50%, transparent 100%);
    border-radius: 2px;
    transform-origin: left center;
    animation: streakFly 7s linear infinite;
    will-change: transform;
}
.craft-streak--1 { top: 12%;  left: -20%; width: 280px; animation-delay: 0s; opacity: 0.7; }
.craft-streak--2 { top: 24%;  left: -30%; width: 220px; animation-delay: 1.4s; opacity: 0.5; }
.craft-streak--3 { top: 48%;  left: -25%; width: 340px; animation-delay: 2.8s; opacity: 0.6; }
.craft-streak--4 { top: 68%;  left: -20%; width: 200px; animation-delay: 4.2s; opacity: 0.45; }
.craft-streak--5 { top: 84%;  left: -30%; width: 300px; animation-delay: 5.6s; opacity: 0.55; }

@keyframes streakFly {
    0%   { transform: translateX(0) scaleX(1); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.7; }
    100% { transform: translateX(140vw) scaleX(1.2); opacity: 0; }
}

.craft-section__glow {
    position: absolute;
    width: 720px; height: 600px;
    top: 18%; left: 50%;
    margin-left: -360px;
    background: radial-gradient(ellipse, rgba(209, 10, 17, 0.07) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
}

/* ---------- Perfection background ---------- */
.craft-section--perfection .craft-section__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, #000 30%, transparent 90%);
            mask-image: radial-gradient(ellipse 80% 60% at center, #000 30%, transparent 90%);
}

.craft-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.craft-orb--1 {
    width: 520px; height: 520px;
    top: -180px; left: -160px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.55) 0%, transparent 65%);
    animation: floatA 22s ease-in-out infinite;
}
.craft-orb--2 {
    width: 420px; height: 420px;
    bottom: -160px; right: -140px;
    background: radial-gradient(circle, rgba(255, 26, 34, 0.35) 0%, transparent 65%);
    animation: floatB 26s ease-in-out infinite;
}

/* ---------- Shared heading shell ---------- */
.craft-heading {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 18px;
    margin: 14px 0 28px;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-size: clamp(3.4rem, 11vw, 8rem);
}

/* ---------- Clean section title (replaces the busy Speed/Perfection word treatments) ---------- */
.craft-section__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--black);
    margin: 0 0 26px;
    max-width: 720px;
}

.craft-section__title--light {
    color: var(--white);
}

/* ---------- Speed heading (italic, motion-trail, gradient shine) — legacy, unused ---------- */
.craft-heading--speed {
    font-style: italic;
    color: var(--red);
    transform: skewX(-4deg);
}

.craft-heading--speed .craft-heading__main {
    position: relative;
    z-index: 4;
    display: inline-block;
    background: linear-gradient(95deg, var(--red-dark) 0%, var(--red) 35%, var(--red-bright) 70%, var(--red) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.12em;
    animation: speedShine 4.5s ease-in-out infinite;
    will-change: background-position;
}

@keyframes speedShine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.craft-heading__dot {
    -webkit-text-fill-color: var(--red);
    color: var(--red);
    background: none !important;
    -webkit-background-clip: initial;
            background-clip: initial;
    margin-left: 0.02em;
}

.craft-heading--speed .craft-heading__trail {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    color: var(--red);
    pointer-events: none;
    user-select: none;
    line-height: 0.95;
}
.craft-heading--speed .craft-heading__trail:nth-of-type(1) { opacity: 0.35; z-index: 3; --drift: -22px; }
.craft-heading--speed .craft-heading__trail:nth-of-type(2) { opacity: 0.18; z-index: 2; --drift: -42px; }
.craft-heading--speed .craft-heading__trail:nth-of-type(3) { opacity: 0.08; z-index: 1; --drift: -68px; }

.craft-heading--speed.is-in .craft-heading__trail { animation: trailDrift 5s ease-in-out infinite; }
.craft-heading--speed.is-in .craft-heading__trail:nth-of-type(2) { animation-delay: 0.15s; }
.craft-heading--speed.is-in .craft-heading__trail:nth-of-type(3) { animation-delay: 0.3s; }

@keyframes trailDrift {
    0%, 100% { transform: translateX(calc(var(--drift, -22px) * 0.6)); }
    50%      { transform: translateX(var(--drift, -22px)); }
}

.craft-heading__bolt {
    position: relative;
    z-index: 5;
    width: 0.55em; height: 0.55em;
    color: var(--red-bright);
    filter: drop-shadow(0 6px 18px rgba(209, 10, 17, 0.5));
    transform: skewX(4deg) translateY(-0.05em);
    animation: boltZap 1.6s ease-in-out infinite;
    will-change: transform, opacity;
    flex-shrink: 0;
}

@keyframes boltZap {
    0%, 100% { transform: skewX(4deg) translateY(-0.05em) scale(1); opacity: 1; }
    45%      { transform: skewX(4deg) translateY(-0.08em) scale(1.08); opacity: 0.85; }
    55%      { transform: skewX(4deg) translateY(-0.05em) scale(0.95); opacity: 1; }
}

/* ---------- Perfection heading (letter-by-letter stamp, crosshair pulse) ---------- */
.craft-heading--perfection { color: var(--white); }

.craft-heading--perfection .craft-heading__main {
    display: inline-flex;
    align-items: baseline;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8C4C6 50%, var(--red-bright) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.06em;
}

.craft-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em) scale(0.6);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1.2, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1.2, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 60ms + 200ms);
}

.craft-heading--perfection.is-in .craft-letter {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.craft-letter--dot {
    color: var(--red-bright);
    -webkit-text-fill-color: var(--red-bright);
}

.craft-heading__crosshair {
    position: relative;
    width: 0.58em; height: 0.58em;
    color: var(--red-bright);
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
    transition: opacity 0.7s var(--ease), transform 0.9s cubic-bezier(0.16, 1.2, 0.3, 1);
    transition-delay: 900ms;
    align-self: center;
    transform-origin: center;
    flex-shrink: 0;
}
.craft-heading__crosshair svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 6px 18px rgba(209, 10, 17, 0.45));
}

.craft-heading--perfection.is-in .craft-heading__crosshair {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: crosshairPulse 3.6s ease-in-out 1.6s infinite;
}

@keyframes crosshairPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.06) rotate(90deg); }
}

/* ---------- Section lead ---------- */
.craft-section__lead {
    max-width: 720px;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.7;
    color: var(--grey-700);
    margin-bottom: 56px;
}
.craft-section__lead--light { color: rgba(255, 255, 255, 0.78); }
.craft-section__lead em { font-style: italic; color: var(--red); font-weight: 500; }
.craft-section__lead--light em { color: var(--red-bright); }

/* ---------- Cards grid ---------- */
.craft-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.craft-card {
    position: relative;
    padding: 32px 30px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.craft-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    z-index: -1;
}

.craft-card:hover {
    transform: translateY(-6px);
    border-color: var(--grey-300);
    box-shadow: var(--shadow-lg);
}
.craft-card:hover::before { opacity: 1; }

.craft-card__icon {
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--grey-100);
    color: var(--red);
    margin-bottom: 20px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.craft-card__icon svg { width: 24px; height: 24px; }
.craft-card:hover .craft-card__icon {
    background: var(--red);
    color: var(--white);
    transform: rotate(-6deg) scale(1.05);
}

.craft-card h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.015em;
    margin-bottom: 12px;
}

.craft-card p {
    font-size: 0.93rem;
    color: var(--grey-700);
    line-height: 1.65;
}
.craft-card p em { font-style: italic; color: var(--red); font-weight: 500; }

/* "Less technical" hover tooltip */
.craft-card--with-tooltip {
    position: relative;
    cursor: help;
    outline: none;
    overflow: visible;
}

.craft-card--with-tooltip:hover,
.craft-card--with-tooltip:focus-visible {
    border-color: rgba(209, 10, 17, 0.35);
}

.craft-card__hint {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    vertical-align: middle;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.craft-card--with-tooltip:hover .craft-card__hint,
.craft-card--with-tooltip:focus-visible .craft-card__hint {
    color: var(--red-bright);
    border-color: rgba(209, 10, 17, 0.5);
    background: rgba(209, 10, 17, 0.12);
}

.craft-tooltip {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    width: min(440px, calc(100vw - 60px));
    transform: translateX(-50%) translateY(10px);
    padding: 22px 24px;
    background: linear-gradient(165deg, #1A1A1A 0%, #0E0E0E 100%);
    border: 1px solid rgba(209, 10, 17, 0.32);
    border-radius: 16px;
    box-shadow:
        0 30px 60px -18px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(209, 10, 17, 0.1),
        0 0 32px -6px rgba(209, 10, 17, 0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition:
        opacity 0.4s var(--ease),
        transform 0.4s var(--ease);
    text-align: left;
}

.craft-card--with-tooltip:hover .craft-tooltip,
.craft-card--with-tooltip:focus-visible .craft-tooltip,
.craft-card--with-tooltip:focus-within .craft-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.craft-tooltip::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #0E0E0E;
    border-right: 1px solid rgba(209, 10, 17, 0.32);
    border-bottom: 1px solid rgba(209, 10, 17, 0.32);
    transform: translateX(-50%) rotate(45deg);
}

.craft-tooltip__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red-bright);
    margin-bottom: 12px;
}

.craft-tooltip__label::before {
    content: '';
    width: 20px; height: 1.5px;
    background: var(--red-bright);
}

.craft-tooltip__body {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 !important;
}

@media (max-width: 720px) {
    .craft-tooltip {
        bottom: calc(100% + 12px);
        width: min(360px, calc(100vw - 40px));
        padding: 18px 20px;
    }
    .craft-card__hint { display: none; }
}

/* Dark variant for Perfection */
.craft-card--dark {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.craft-card--dark::before {
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.18) 0%, transparent 60%);
}
.craft-card--dark:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
}
.craft-card--dark .craft-card__icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--red-bright);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.craft-card--dark:hover .craft-card__icon {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
}
.craft-card--dark h3 { color: var(--white); }
.craft-card--dark p { color: rgba(255, 255, 255, 0.72); }
.craft-card--dark p em { color: var(--red-bright); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .craft-section { padding: 100px 0; }
    .craft-heading { font-size: clamp(2.8rem, 11vw, 5rem); }
}

@media (max-width: 720px) {
    .craft-section { padding: 70px 0; }
    .craft-grid { grid-template-columns: 1fr; }
    .craft-heading {
        gap: 12px;
        margin: 10px 0 22px;
        font-size: clamp(2.4rem, 14vw, 4rem);
    }
    .craft-heading--speed .craft-heading__trail:nth-of-type(1) { --drift: -14px; }
    .craft-heading--speed .craft-heading__trail:nth-of-type(2) { --drift: -28px; }
    .craft-heading--speed .craft-heading__trail:nth-of-type(3) { --drift: -44px; }
    .craft-card { padding: 26px 22px; }
    .craft-section__lead { margin-bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .craft-streak,
    .craft-heading__bolt,
    .craft-heading__main,
    .craft-heading__trail,
    .craft-heading__crosshair,
    .craft-orb { animation: none !important; }
    .craft-letter { transition: none; opacity: 1; transform: none; }
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .cards          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why__grid      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__inner  { grid-template-columns: 1fr; gap: 40px; }
    .section        { padding: 90px 0; }
}

@media (max-width: 820px) {
    :root { --nav-h: 70px; }

    .nav__links,
    .nav__cta { display: none; }
    .nav__toggle { display: flex; }
    .nav__mobile { display: flex; }

    .nav__inner { grid-template-columns: auto auto; }
    .nav__logo img { height: 34px; }

    .hero { padding: calc(var(--nav-h) + 40px) 0 100px; min-height: auto; }
    .hero__ctas { margin-bottom: 60px; }
    .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 30px; }
    .hero__scroll { display: none; }

    .section { padding: 80px 0; }
    .section__head { margin-bottom: 50px; }

    .cards          { grid-template-columns: 1fr; gap: 16px; }
    .why__grid      { grid-template-columns: 1fr; }
    .steps          { grid-template-columns: 1fr; }
    .card           { padding: 32px 26px; }
    .why__feature   { padding: 36px 28px; }

    .cta { padding: 90px 0; }
    .cta__actions { flex-direction: column; gap: 18px; }

    .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .container { padding: 0 20px; }
    .nav__inner { padding: 0 20px; }
    .hero__badge { font-size: 0.74rem; padding: 7px 13px; }
    .hero__stats { grid-template-columns: 1fr; gap: 22px; }
    .hero__stats .hero__stat { padding-bottom: 22px; border-bottom: 1px solid var(--grey-200); }
    .hero__stats .hero__stat:last-child { border-bottom: 0; padding-bottom: 0; }
    .footer__cols { grid-template-columns: 1fr; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero__shape, .hero__glow, .why__shape, .cta__shape { transform: none !important; }
}

/* =========================================================
   COOKIE CONSENT BANNER — premium dark glass
   ========================================================= */
.cookie-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    width: min(780px, calc(100vw - 32px));
    z-index: 500;
    transform: translateX(-50%) translateY(40px);
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.97) 0%, rgba(28, 28, 30, 0.97) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow:
        0 30px 70px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(209, 10, 17, 0.12) inset;
    color: var(--white);
    overflow: hidden;
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cookie-bar.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.cookie-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(209, 10, 17, 0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.cookie-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--red), var(--red-bright), var(--red), transparent);
    opacity: 0.7;
    z-index: 2;
}

.cookie-bar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
}

.cookie-bar__main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.cookie-bar__icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
    box-shadow: 0 10px 22px -6px rgba(209, 10, 17, 0.55);
    position: relative;
}

.cookie-bar__icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.45) 0%, transparent 70%);
    z-index: -1;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}

.cookie-bar:hover .cookie-bar__icon::before {
    opacity: 1;
}

.cookie-bar__icon svg { width: 26px; height: 26px; }

.cookie-bar__content { flex: 1; min-width: 0; }

.cookie-bar__content h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 5px;
    letter-spacing: -0.01em;
}

.cookie-bar__content p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.cookie-bar__content a {
    color: var(--white);
    text-decoration: underline;
    text-decoration-color: rgba(209, 10, 17, 0.6);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s var(--ease);
}
.cookie-bar__content a:hover { text-decoration-color: var(--red); }

.cookie-bar__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-bar__btn {
    padding: 10px 18px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition:
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        border-color 0.3s var(--ease),
        transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}

.cookie-bar__btn--primary {
    background: var(--red);
    color: var(--white);
    box-shadow: 0 6px 18px -6px rgba(209, 10, 17, 0.55);
}
.cookie-bar__btn--primary:hover {
    background: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(209, 10, 17, 0.7);
}

.cookie-bar__btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
}
.cookie-bar__btn--ghost:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

/* ---------- Preferences view ---------- */
.cookie-prefs {
    position: relative;
    z-index: 1;
    padding: 24px 26px 22px;
    animation: cookiePrefsIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cookiePrefsIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.cookie-prefs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.cookie-prefs__head h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--white);
    letter-spacing: -0.01em;
}

.cookie-prefs__close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.cookie-prefs__close:hover {
    background: var(--red);
    color: var(--white);
    transform: rotate(90deg);
}

.cookie-prefs__intro {
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 18px;
}

.cookie-pref {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cookie-pref:last-of-type { border-bottom: 0; padding-bottom: 4px; }

.cookie-pref__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
}

.cookie-pref__label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-pref__label strong {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--white);
}

.cookie-pref__tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(209, 10, 17, 0.16);
    color: #FF7780;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cookie-pref__tag--muted {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.cookie-pref p {
    font-size: 0.83rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    padding-right: 64px;
}

/* ---------- Toggle switch ---------- */
.cookie-toggle {
    position: relative;
    width: 42px; height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-block;
}
.cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.cookie-toggle > span {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: background 0.3s var(--ease);
}
.cookie-toggle > span::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: var(--white);
    border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.22, 1.2, 0.36, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.cookie-toggle input:checked + span {
    background: var(--red);
    box-shadow: 0 0 0 1px rgba(209, 10, 17, 0.5);
}
.cookie-toggle input:checked + span::before { transform: translateX(18px); }

.cookie-toggle--locked > span {
    background: rgba(209, 10, 17, 0.55);
    cursor: not-allowed;
}
.cookie-toggle--locked > span::before { transform: translateX(18px); }

.cookie-prefs__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mobile cookie banner */
@media (max-width: 720px) {
    .cookie-bar {
        bottom: 14px;
        width: calc(100vw - 24px);
    }
    .cookie-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 20px;
    }
    .cookie-bar__icon { width: 38px; height: 38px; }
    .cookie-bar__icon svg { width: 22px; height: 22px; }
    .cookie-bar__actions { flex-direction: column-reverse; }
    .cookie-bar__btn { width: 100%; padding: 12px; }
    .cookie-prefs { padding: 20px; }
    .cookie-prefs__actions { flex-direction: column-reverse; }
    .cookie-prefs__actions .cookie-bar__btn { width: 100%; }
    .cookie-pref p { padding-right: 0; }
}

/* =========================================================
   LEGAL PAGES — Privacy / Cookies / Terms
   ========================================================= */
.legal-page {
    position: relative;
    padding: calc(var(--nav-h) + 70px) 0 50px;
    background: radial-gradient(ellipse at top, var(--white) 0%, #FBFBFB 60%, var(--grey-50) 100%);
    overflow: hidden;
}

.legal-page__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.legal-page__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center top, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at center top, #000 30%, transparent 80%);
}

.legal-page__shape {
    position: absolute;
    width: 480px; height: 480px;
    top: -120px; right: -150px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.12) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(50px);
}

.legal-page__head {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px;
}

.legal-page__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--black);
    margin: 0 0 22px;
}

.legal-page__title .text-accent { color: var(--red); }

.legal-page__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--grey-700);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}
.legal-page__meta strong { color: var(--ink); font-weight: 600; }

/* ---------- Legal body content ---------- */
.legal-body {
    padding: 30px 0 110px;
    background: var(--white);
}

.legal-body__wrap {
    max-width: 780px;
    margin: 0 auto;
}

.legal-toc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    padding: 28px 30px;
    margin-bottom: 50px;
    background: var(--grey-50);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-lg);
}

.legal-toc__title {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-500);
    margin-bottom: 8px;
}

.legal-toc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--ink);
    border-bottom: 0;
    transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.legal-toc a::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}
.legal-toc a:hover {
    color: var(--red);
    gap: 12px;
}

.legal-section {
    margin-bottom: 44px;
    scroll-margin-top: calc(var(--nav-h) + 24px);
}

.legal-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--black);
    margin: 0 0 18px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.legal-section h2 span.legal-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.08em;
}

.legal-section h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 26px 0 10px;
    letter-spacing: -0.01em;
}

.legal-section p,
.legal-section li {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--grey-700);
    margin: 0 0 14px;
}

.legal-section ul {
    margin: 0 0 18px;
    padding-left: 0;
    list-style: none;
}

.legal-section ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}
.legal-section ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(209, 10, 17, 0.15);
    border: 1.5px solid var(--red);
}

.legal-section strong { color: var(--ink); font-weight: 600; }

.legal-section a:not(.btn) {
    color: var(--red);
    border-bottom: 1px solid rgba(209, 10, 17, 0.3);
    transition: border-color 0.25s var(--ease);
}
.legal-section a:not(.btn):hover { border-bottom-color: var(--red); }

.legal-callout {
    margin: 30px 0;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.04) 0%, var(--grey-50) 100%);
    border: 1px solid var(--grey-200);
    border-left: 3px solid var(--red);
    border-radius: 14px;
}

.legal-callout strong { color: var(--ink); }

.legal-contact {
    margin-top: 60px;
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--black);
    color: var(--white);
    text-align: center;
}

.legal-contact h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 10px;
    letter-spacing: -0.015em;
}

.legal-contact p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px;
    line-height: 1.6;
}

.legal-contact a {
    color: var(--white);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
    transition: border-color 0.3s var(--ease);
}
.legal-contact a:hover { border-color: var(--white); }

@media (max-width: 720px) {
    .legal-page { padding: calc(var(--nav-h) + 40px) 0 30px; }
    .legal-body { padding: 20px 0 80px; }
    .legal-toc { grid-template-columns: 1fr; padding: 22px; margin-bottom: 36px; }
    .legal-section { margin-bottom: 36px; }
    .legal-section p, .legal-section li { font-size: 0.95rem; }
    .legal-contact { padding: 26px 22px; margin-top: 40px; }
}

/* ---------- Footer legal row ---------- */
.footer__legal-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.footer__legal-row a,
.footer__legal-row button {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--grey-500);
    cursor: pointer;
    transition: color 0.25s var(--ease);
}
.footer__legal-row a:hover,
.footer__legal-row button:hover { color: var(--red); }

@media (max-width: 720px) {
    .footer__legal-row { gap: 14px; }
}

/* =========================================================
   AUDIT P1: accessibility & no-JS fallback
   ========================================================= */

/* Skip link — visually hidden until keyboard-focused */
.skip-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--black);
    color: var(--white);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.25s var(--ease);
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

main:focus { outline: none; }

/* When JS is missing/disabled, .reveal elements must be visible.
   The inline script in <head> adds .js to <html>; only then do we hide them. */
.js .reveal {
    opacity: 0;
    transform: translateY(28px);
}
.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* =========================================================
   AUDIT P0: Hero trust stats (label-only, no counter)
   ========================================================= */
.hero__stat-label--lg {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.25vw, 1.08rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.4;
    text-align: center;
    padding: 4px 0;
    position: relative;
}

.hero__stat-label--lg::before {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: var(--red);
    border-radius: 2px;
    margin: 0 auto 14px;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .hero__stats {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    .hero__stat-label--lg::before { margin-bottom: 10px; }
}

/* =========================================================
   AUDIT P2 #13: Founder section — premium asymmetric block
   ========================================================= */
.founder {
    position: relative;
    background: linear-gradient(180deg, var(--grey-50) 0%, var(--white) 100%);
    overflow: hidden;
    padding: 130px 0;
}

.founder__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.founder__grid {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(to right, rgba(10, 10, 10, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 10, 10, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, #000 30%, transparent 80%);
    will-change: transform;
}

.founder__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.founder__glow--a {
    width: 520px; height: 520px;
    top: -120px; left: -120px;
    background: radial-gradient(circle, rgba(209, 10, 17, 0.18) 0%, transparent 65%);
    animation: floatA 22s ease-in-out infinite;
}
.founder__glow--b {
    width: 380px; height: 380px;
    bottom: -100px; right: -80px;
    background: radial-gradient(circle, rgba(255, 26, 34, 0.10) 0%, transparent 65%);
    animation: floatB 26s ease-in-out infinite;
}

.founder__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

/* ---- Media side ---- */
.founder__media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.founder__stack {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 4 / 5;
}

/* Offset red stamp behind photo — adds asymmetric brand presence */
.founder__stamp {
    position: absolute;
    inset: 18px -18px -22px 32px;
    background: var(--red);
    border-radius: 26px;
    z-index: 0;
    box-shadow: 0 30px 60px -20px rgba(209, 10, 17, 0.4);
    animation: founderStampFloat 8s ease-in-out infinite;
}

/* Outlined ring behind photo for layered depth */
.founder__ring {
    position: absolute;
    inset: -28px 28px 16px -22px;
    border: 1.5px solid rgba(10, 10, 10, 0.18);
    border-radius: 26px;
    z-index: 0;
}

.founder__photo-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: var(--grey-100);
    box-shadow:
        0 36px 80px -24px rgba(10, 10, 10, 0.30),
        0 0 0 1px rgba(10, 10, 10, 0.05);
    transform: rotate(-1.5deg);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.founder__media:hover .founder__photo-wrap {
    transform: rotate(-0.5deg) translateY(-4px);
}

.founder__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    position: relative;
    z-index: 0;
}

.founder__photo-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 10, 0.35) 100%);
    pointer-events: none;
}

.founder__photo-tag {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--grey-700);
    box-shadow: 0 14px 28px -10px rgba(10, 10, 10, 0.3);
    line-height: 1.3;
}
.founder__photo-tag span { display: flex; flex-direction: column; }
.founder__photo-tag strong {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.005em;
    margin-bottom: 1px;
}

.founder__photo-tag-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(209, 10, 17, 0.55);
    animation: pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

.founder__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 4px;
}
.founder__chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--grey-700);
}

/* ---- Body side ---- */
.founder__body { max-width: 540px; }

.founder__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--black);
    margin: 22px 0;
}

.founder__lede {
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    line-height: 1.7;
    color: var(--grey-700);
    margin-bottom: 28px;
}

.founder__signature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 36px;
}
.founder__signature-line {
    width: 42px;
    height: 1.5px;
    background: var(--red);
    flex-shrink: 0;
}
.founder__signature-text {
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--grey-700);
    letter-spacing: 0.01em;
}

@keyframes founderStampFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(4px, -6px); }
}

@media (max-width: 980px) {
    .founder { padding: 90px 0; }
    .founder__inner {
        grid-template-columns: 1fr;
        gap: 60px;
        max-width: 560px;
    }
    .founder__stack { max-width: 380px; margin: 0 auto; }
    .founder__media { align-items: center; }
    .founder__chips { justify-content: center; padding-left: 0; }
    .founder__body { max-width: none; }
}

@media (max-width: 480px) {
    .founder { padding: 70px 0; }
    .founder__stamp { inset: 14px -10px -16px 22px; }
    .founder__ring { inset: -18px 18px 10px -14px; }
    .founder__photo-tag {
        left: 14px; bottom: 14px;
        padding: 10px 14px;
        font-size: 0.74rem;
    }
}

/* =========================================================
   INTERACTIVE "WHAT'S INCLUDED" CARDS (service detail pages)
   Each service page sets `--accent` on <body>; this component picks it up.
   Progressive enhancement: without JS, all descriptions stay visible.
   ========================================================= */
.included {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.included__item {
    position: relative;
    background: var(--grey-50);
    border-radius: 14px;
    border-left: 3px solid var(--accent, var(--red));
    overflow: hidden;
    transition:
        background 0.3s var(--ease),
        transform 0.3s var(--ease),
        box-shadow 0.3s var(--ease),
        border-left-width 0.3s var(--ease);
}

.included__item:hover {
    background: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -14px rgba(10, 10, 10, 0.18);
    border-left-width: 5px;
}

.included__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    gap: 14px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--black);
    font-family: inherit;
    text-align: left;
}

.included__head:focus-visible {
    outline: 2px solid var(--accent, var(--red));
    outline-offset: -2px;
    border-radius: 12px;
}

.included__title {
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--black);
}

.included__indicator {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent, var(--red));
    color: var(--white);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.included__head[aria-expanded="true"] .included__indicator {
    transform: rotate(180deg);
}

/* Smooth height animation via the grid-template-rows trick — no JS height math. */
.included__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Only when JS is available do we collapse cards by default. Without JS the
   descriptions stay visible so the content is still readable. */
.js .included__body {
    grid-template-rows: 0fr;
}

.js .included__head[aria-expanded="true"] + .included__body {
    grid-template-rows: 1fr;
}

/* Hide the indicator entirely when there's no JS — clicking would do nothing. */
html:not(.js) .included__indicator {
    display: none;
}

.included__body-inner {
    min-height: 0;
    overflow: hidden;
}

.included__body p {
    margin: 0;
    padding: 0 18px 18px 18px;
    color: var(--grey-700);
    font-size: 0.92rem;
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    .included__item,
    .included__head,
    .included__indicator,
    .included__body {
        transition: none;
    }
}

/* =========================================================
   HOMEPAGE REBUILD (hp-*)
   Editorial layout, scoped via hp- prefix so other pages stay intact.
   ========================================================= */

:root {
    --hp-display: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --hp-bg: #FAF8F4;
    --hp-bg-warm: #F5EFE6;
    --hp-ink: #0A0A0A;
    --hp-ink-soft: #4A4A4A;
    --hp-line: rgba(10, 10, 10, 0.12);
    --hp-line-strong: rgba(10, 10, 10, 0.7);
}

/* Subtle grain (SVG noise via data-uri, very low opacity) */
.hp-grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.04;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* ---------- Reveal primitives ---------- */
.hp-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.9s var(--ease),
        transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.hp-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* Word/line mask reveal — clip-path swipe up */
.hp-mask {
    display: block;
    overflow: hidden;
    line-height: 1.05;
    padding-bottom: 0.08em;
    margin-bottom: -0.04em;
}
.hp-mask__inner {
    display: block;
    transform: translateY(110%);
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform;
}
.hp-mask__inner.is-in {
    transform: translateY(0);
}

/* ---------- Magnetic button ---------- */
.hp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.96rem;
    letter-spacing: -0.01em;
    color: var(--white);
    background: var(--hp-ink);
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 0.5s var(--ease),
        background-color 0.5s var(--ease),
        color 0.5s var(--ease),
        box-shadow 0.5s var(--ease);
    will-change: transform;
}
.hp-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: 1;
}
.hp-btn:hover::before { transform: translateY(0); }
.hp-btn:hover {
    color: var(--white);
    box-shadow: 0 22px 46px -14px rgba(209, 10, 17, 0.55);
}
.hp-btn__label {
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-btn__arrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-btn:hover .hp-btn__label { transform: translateX(-2px); }
.hp-btn:hover .hp-btn__arrow { transform: translateX(6px); }
.hp-btn:active { transform: translateY(1px) scale(0.985); }

.hp-btn--primary { background: var(--hp-ink); color: var(--white); }
.hp-btn--lg { padding: 20px 34px; font-size: 1.02rem; }

/* ---------- Link with drawn underline (left-to-right) ---------- */
.hp-link-draw {
    position: relative;
    display: inline-block;
    color: var(--hp-ink);
    font-size: 0.94rem;
    line-height: 1.4;
    padding-bottom: 3px;
}
.hp-link-draw::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-link-draw:hover::after { transform: scaleX(1); }

/* ---------- Section head with accent line ---------- */
.hp-section-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hp-section-line {
    display: block;
    height: 1px;
    width: 0;
    background: var(--hp-ink);
    margin: 0 0 32px;
    transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.hp-section-head.is-in .hp-section-line { width: 56px; }

.hp-section-eyebrow {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hp-ink);
    margin: 0 0 22px;
}

.hp-section-title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--hp-ink);
    margin: 0;
}
.hp-section-title em {
    font-style: normal;
    font-weight: 600;
    color: var(--red);
}
.hp-section-title--sm {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

/* =========================================================
   HERO
   ========================================================= */
.hp-hero {
    position: relative;
    background: var(--hp-bg);
    padding: calc(var(--nav-h) + 100px) 0 140px;
    overflow: hidden;
}
.hp-hero__grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.045;
    pointer-events: none;
}
.hp-hero__inner {
    position: relative;
    text-align: center;
    max-width: 1100px;
}

.hp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hp-ink-soft);
    margin: 0 0 44px;
}
.hp-hero__eyebrow-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--hp-ink);
}

.hp-hero__title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 6.6vw, 5.6rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--hp-ink);
    margin: 0 auto;
    max-width: 16ch;
}
.hp-hero__title em {
    font-style: normal;
    font-weight: 600;
    color: var(--red);
}

.hp-hero__sub {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.55;
    color: var(--hp-ink-soft);
    margin: 40px auto 56px;
    max-width: 56ch;
}

.hp-hero__cta {
    display: flex;
    justify-content: center;
}

.hp-hero__scrollcue {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hp-ink-soft);
}
.hp-hero__scrollcue.is-in { transform: translate(-50%, 0); }
.hp-hero__scrollcue-line {
    display: block;
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, var(--hp-ink) 0%, var(--hp-ink) 50%, transparent 50%, transparent 100%);
    background-size: 100% 200%;
    background-position: 0 0;
    animation: hpScrollLine 2.4s ease-in-out infinite;
}
@keyframes hpScrollLine {
    0%   { background-position: 0 -100%; }
    50%  { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

/* Tech strip integrates with the warm hero — soften the top border the existing rules apply */
.hp-hero + .tech-strip {
    background: var(--hp-bg);
    border-top: 1px solid var(--hp-line);
    border-bottom: 1px solid var(--hp-line);
}

/* =========================================================
   SOFTWARE SERVICES
   ========================================================= */
.hp-services {
    position: relative;
    background: var(--white);
    padding: 140px 0 120px;
}

.hp-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1140px;
    margin: 0 auto;
}

.hp-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--hp-bg);
    border-radius: 18px;
    overflow: hidden;
    color: var(--hp-ink);
    text-decoration: none;
    transition:
        transform 0.6s var(--ease),
        box-shadow 0.6s var(--ease),
        background-color 0.6s var(--ease);
}
.hp-svc:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -28px rgba(10, 10, 10, 0.25);
}

.hp-svc__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #F2EDE4 0%, #E9E2D4 100%);
    overflow: hidden;
    border-bottom: 1px solid var(--hp-line);
}
.hp-svc__media-inner {
    position: absolute;
    inset: 0;
    transition: transform 0.9s var(--ease);
    will-change: transform;
}
.hp-svc:hover .hp-svc__media-inner {
    transform: scale(1.045);
}

/* Adjustments so the existing mockup components scale nicely in the new cards */
.hp-svc__media .mu-browser,
.hp-svc__media .mu-phone,
.hp-svc__media .mu-chat,
.hp-svc__media .mu-dashboard {
    transform: none;
}
.hp-svc__media .mu-phone {
    max-height: 100%;
}

.hp-svc__body {
    position: relative;
    padding: 30px 32px 34px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-svc__title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--hp-ink);
    margin: 0;
    transition: transform 0.5s var(--ease);
}
.hp-svc:hover .hp-svc__title { transform: translateX(6px); }

.hp-svc__desc {
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--hp-ink-soft);
    margin: 0;
    max-width: 42ch;
}

.hp-svc__arrow {
    position: absolute;
    top: 30px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--hp-ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-6px, 6px);
    transition:
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease),
        background-color 0.5s var(--ease);
}
.hp-svc:hover .hp-svc__arrow {
    opacity: 1;
    transform: translate(0, 0);
    background: var(--red);
}

/* =========================================================
   BRANDING CAROUSEL
   ========================================================= */
.hp-brand {
    position: relative;
    background: var(--hp-bg);
    padding: 110px 0 130px;
    overflow: hidden;
}

.hp-carousel {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0 12px;
}

.hp-carousel__viewport {
    position: relative;
    overflow: hidden;
    padding: 30px 0 18px;
}

.hp-carousel__track {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 510px;
}

.hp-carousel__slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 460px;
    max-width: 86%;
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity 0.7s var(--ease),
        filter 0.7s var(--ease);
    filter: blur(2px);
    z-index: 1;
}

.hp-carousel__slide.is-prev {
    transform: translate(calc(-50% - 320px), -50%) scale(0.82);
    opacity: 0.45;
    pointer-events: none;
    filter: blur(1px);
    z-index: 2;
}
.hp-carousel__slide.is-next {
    transform: translate(calc(-50% + 320px), -50%) scale(0.82);
    opacity: 0.45;
    pointer-events: none;
    filter: blur(1px);
    z-index: 2;
}
.hp-carousel__slide.is-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
    z-index: 3;
}

.hp-bcard {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(10, 10, 10, 0.2);
    display: flex;
    flex-direction: column;
    color: var(--hp-ink);
    text-decoration: none;
    transition:
        transform 0.55s var(--ease),
        box-shadow 0.55s var(--ease);
    cursor: pointer;
}
.hp-carousel__slide.is-active .hp-bcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 36px 70px -28px rgba(10, 10, 10, 0.28);
}
.hp-bcard__cover {
    aspect-ratio: 4 / 3;
    background: var(--hp-bg-warm);
    overflow: hidden;
}
.hp-bcard__cover svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.9s var(--ease);
}
.hp-carousel__slide.is-active .hp-bcard:hover .hp-bcard__cover svg {
    transform: scale(1.04);
}
.hp-bcard__body {
    position: relative;
    padding: 24px 26px 28px;
}
.hp-bcard__title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    color: var(--hp-ink);
    transition: transform 0.45s var(--ease);
}
.hp-carousel__slide.is-active .hp-bcard:hover .hp-bcard__title {
    transform: translateX(4px);
}
.hp-bcard__desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--hp-ink-soft);
    margin: 0;
    padding-right: 48px;
}
.hp-bcard__arrow {
    position: absolute;
    right: 22px;
    bottom: 24px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--hp-ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition:
        opacity 0.45s var(--ease),
        transform 0.45s var(--ease),
        background-color 0.45s var(--ease);
}
.hp-carousel__slide.is-active .hp-bcard:hover .hp-bcard__arrow {
    opacity: 1;
    transform: translate(0, 0);
    background: var(--red);
}

.hp-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--hp-line);
    color: var(--hp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition:
        background-color 0.4s var(--ease),
        color 0.4s var(--ease),
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.hp-carousel__btn:hover {
    background: var(--hp-ink);
    color: var(--white);
    border-color: var(--hp-ink);
    box-shadow: 0 14px 30px -12px rgba(10, 10, 10, 0.35);
}
.hp-carousel__btn--prev { left: 8px; }
.hp-carousel__btn--next { right: 8px; }
.hp-carousel__btn:hover { transform: translateY(-50%) scale(1.04); }

.hp-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.hp-carousel__dot {
    width: 22px;
    height: 2px;
    background: var(--hp-line);
    border: 0;
    cursor: pointer;
    transition: background-color 0.4s var(--ease), width 0.4s var(--ease);
    padding: 0;
}
.hp-carousel__dot.is-active {
    background: var(--hp-ink);
    width: 36px;
}

.hp-services-callout {
    max-width: 760px;
    margin: 80px auto 0;
    padding: 0 24px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
}
.hp-services-callout a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.hp-services-callout a:hover { text-decoration-thickness: 2px; }
.hp-services-callout a:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (max-width: 720px) {
    .hp-services-callout {
        margin-top: 52px;
        font-size: 0.95rem;
        line-height: 1.65;
    }
}

/* =========================================================
   OUR PROCESS
   ========================================================= */
.hp-process {
    --rail-x: clamp(150px, 17vw, 220px);
    position: relative;
    background: var(--white);
    padding: 150px 0 170px;
    overflow: hidden;
}

.hp-process__timeline {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}

.hp-process__cta {
    display: flex;
    justify-content: center;
    margin-top: 72px;
}
/* Override base hp-reveal hide so the timeline itself stays visible;
   .is-in still fires so the rail can draw and items can stagger in. */
.hp-process__timeline.hp-reveal {
    opacity: 1;
    transform: none;
}

.hp-process__rail {
    position: absolute;
    left: var(--rail-x);
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--hp-line) 6%,
        var(--hp-line) 94%,
        transparent 100%
    );
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.9s cubic-bezier(0.65, 0.05, 0.25, 1) 0.1s;
    will-change: transform;
}
.hp-process__timeline.is-in .hp-process__rail { transform: scaleY(1); }

.hp-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 9vw, 130px);
}

.hp-process__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--rail-x) 1fr;
    column-gap: clamp(44px, 5vw, 80px);
    align-items: center;
}

.hp-process__num {
    grid-column: 1;
    justify-self: end;
    font-family: var(--hp-display);
    font-weight: 300;
    font-size: clamp(4rem, 11vw, 9.5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--hp-ink);
    opacity: 0.18;
    transform: scale(0.9);
    transform-origin: right center;
    transition:
        opacity 1s var(--ease),
        transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
        font-weight 1s var(--ease),
        letter-spacing 1s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.hp-process__item.is-in .hp-process__num {
    font-weight: 700;
    opacity: 1;
    transform: scale(1);
    letter-spacing: -0.055em;
}

.hp-process__node {
    position: absolute;
    left: var(--rail-x);
    top: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 5px var(--white), 0 0 0 6px var(--hp-line);
    transform: scale(0);
    transition:
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.45s var(--ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 380ms);
    z-index: 1;
}
.hp-process__item.is-in .hp-process__node { transform: scale(1); }

.hp-process__body {
    grid-column: 2;
    padding-left: clamp(20px, 3vw, 40px);
    max-width: 54ch;
}

.hp-process__title {
    position: relative;
    display: inline-block;
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--hp-ink);
    margin: 0 0 18px;
    transition: color 0.5s var(--ease);
}
.hp-process__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s cubic-bezier(0.65, 0.05, 0.25, 1);
}
.hp-process__copy {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--hp-ink-soft);
    margin: 0;
    transition: color 0.55s var(--ease);
}

/* Per-step hover interactivity */
.hp-process__item {
    cursor: default;
}
@media (hover: hover) and (pointer: fine) {
    .hp-process__item:hover .hp-process__num {
        color: var(--red);
        transform: scale(1.06);
        letter-spacing: -0.06em;
    }
    .hp-process__item:hover .hp-process__title::after {
        transform: scaleX(1);
    }
    .hp-process__item:hover .hp-process__copy {
        color: var(--hp-ink);
    }
    .hp-process__item:hover .hp-process__node {
        transform: scale(1.6);
        transition-delay: 0ms;
        box-shadow: 0 0 0 5px var(--white), 0 0 0 7px rgba(209, 10, 17, 0.35);
    }
    .hp-process__item:hover .hp-process__num {
        transition-delay: 0ms;
    }
}

/* =========================================================
   WHY US — full-bleed 2×3 editorial grid
   ========================================================= */
.hp-edge {
    position: relative;
    background: var(--hp-bg);
    padding: clamp(70px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
}

.hp-edge__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.hp-edge__row {
    position: relative;
    width: 100%;
}

/* Edge-to-edge horizontal dividers — bottom on every row + top on row 1 */
.hp-edge__row::after,
.hp-edge__list .hp-edge__row:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(10, 10, 10, 0.16);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.65, 0.05, 0.25, 1);
    transition-delay: calc(var(--reveal-delay, 0ms) + 180ms);
    pointer-events: none;
}
.hp-edge__row::after { bottom: 0; }
.hp-edge__list .hp-edge__row:first-child::before { top: 0; }
.hp-edge__row.is-in::after,
.hp-edge__list .hp-edge__row.is-in:first-child::before {
    transform: scaleX(1);
}

.hp-edge__row-inner {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(18px, 2vw, 28px) clamp(20px, 4vw, 56px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 5vw, 88px);
    align-items: stretch;
}

/* Vertical divider down the middle of each row, draws top-to-bottom on entry */
.hp-edge__row-inner::after {
    content: '';
    position: absolute;
    top: clamp(18px, 2vw, 28px);
    bottom: clamp(18px, 2vw, 28px);
    left: 50%;
    width: 1px;
    background: rgba(10, 10, 10, 0.16);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1s cubic-bezier(0.65, 0.05, 0.25, 1);
    transition-delay: calc(var(--reveal-delay, 0ms) + 320ms);
    pointer-events: none;
}
.hp-edge__row.is-in .hp-edge__row-inner::after { transform: scaleY(1); }

.hp-edge__cell {
    padding: clamp(14px, 1.8vw, 22px) clamp(8px, 1.5vw, 18px);
    border-radius: 4px;
    transition: background-color 0.5s var(--ease);
}

.hp-edge__num {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--hp-ink);
    opacity: 0.5;
    margin: 0 0 10px;
    transition:
        opacity 0.5s var(--ease),
        color 0.5s var(--ease),
        letter-spacing 0.5s var(--ease);
}

.hp-edge__title {
    display: inline-block;
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(1.3rem, 1.85vw, 1.6rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--hp-ink);
    margin: 0 0 10px;
    transition:
        transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
        color 0.5s var(--ease);
    will-change: transform;
}

.hp-edge__copy {
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.55;
    color: rgba(10, 10, 10, 0.7);
    margin: 0;
    max-width: 48ch;
}

/* Hover polish — per cell, fine pointer only */
@media (hover: hover) and (pointer: fine) {
    .hp-edge__cell:hover {
        background-color: rgba(10, 10, 10, 0.045);
    }
    .hp-edge__cell:hover .hp-edge__num {
        opacity: 1;
        color: var(--red);
        letter-spacing: 0.32em;
    }
    .hp-edge__cell:hover .hp-edge__copy {
        color: var(--hp-ink);
    }
}


/* =========================================================
   CLOSING CTA
   ========================================================= */
.hp-close {
    position: relative;
    background: var(--hp-ink);
    color: var(--white);
    padding: 160px 0 170px;
    overflow: hidden;
}
.hp-close__grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.05;
    pointer-events: none;
}
.hp-close__inner {
    position: relative;
    text-align: center;
    max-width: 980px;
}

.hp-close__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 36px;
}
.hp-close__eyebrow-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.7);
}

.hp-close__title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 6.6vw, 5.2rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: var(--white);
    margin: 0 auto;
    max-width: 16ch;
}
.hp-close__title em {
    font-style: normal;
    font-weight: 600;
    color: var(--red-bright);
}

.hp-close__sub {
    font-family: var(--font-body);
    font-size: 1.06rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 50ch;
    margin: 36px auto 48px;
}

.hp-close__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.hp-close__actions .hp-btn {
    background: var(--white);
    color: var(--hp-ink);
}
.hp-close__actions .hp-btn::before { background: var(--red); }
.hp-close__actions .hp-btn:hover { color: var(--white); }
.hp-close__actions .hp-link-draw {
    color: rgba(255, 255, 255, 0.75);
}
.hp-close__actions .hp-link-draw:hover { color: var(--white); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
    .hp-svc-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hp-process {
        --rail-x: clamp(82px, 18vw, 130px);
    }
    .hp-process__steps {
        gap: 80px;
    }
    .hp-process__item {
        column-gap: 28px;
        align-items: flex-start;
    }
    .hp-process__num {
        font-size: clamp(3.4rem, 14vw, 6rem);
        line-height: 1;
    }
    .hp-process__body {
        padding-left: 18px;
    }
    .hp-carousel__slide.is-prev,
    .hp-carousel__slide.is-next {
        opacity: 0;
        pointer-events: none;
    }
    .hp-carousel__btn--prev { left: 4px; }
    .hp-carousel__btn--next { right: 4px; }
    .hp-hero { padding: calc(var(--nav-h) + 60px) 0 100px; }
    .hp-services, .hp-process, .hp-brand { padding-top: 100px; padding-bottom: 110px; }
    .hp-close { padding: 110px 0 120px; }
}

@media (max-width: 760px) {
    .hp-edge__row-inner {
        grid-template-columns: 1fr;
        row-gap: 0;
        padding: 18px clamp(20px, 6vw, 32px);
    }
    /* Vertical divider becomes a horizontal divider between the stacked cells */
    .hp-edge__row-inner::after {
        top: 50%;
        bottom: auto;
        left: clamp(20px, 6vw, 32px);
        right: clamp(20px, 6vw, 32px);
        width: auto;
        height: 1px;
        transform: scaleX(0);
        transform-origin: left center;
    }
    .hp-edge__row.is-in .hp-edge__row-inner::after { transform: scaleX(1); }
    .hp-edge__cell { padding: 18px 0; }
    .hp-edge__title { font-size: 1.35rem; }
    .hp-edge__copy { font-size: 0.95rem; }
}

@media (max-width: 560px) {
    .hp-process {
        --rail-x: 56px;
    }
    .hp-process__num {
        font-size: clamp(2.8rem, 16vw, 4.4rem);
    }
    .hp-process__node { display: none; }
    .hp-process__body { padding-left: 12px; }
    .hp-process__title { font-size: 1.45rem; margin-bottom: 12px; }
    .hp-process__copy { font-size: 0.97rem; line-height: 1.65; }
}

/* =========================================================
   SERVICE PAGES — shared layout (svc2-*)
   One CSS block, per-page accent via [data-svc="..."]
   ========================================================= */

[data-svc="web"]       { --svc-accent: #2D5A8E; }
[data-svc="mobile"]    { --svc-accent: #C75B3B; }
[data-svc="ai"]        { --svc-accent: #6F4FB3; }
[data-svc="cloud"]     { --svc-accent: #2E7D7A; }
[data-svc="branding"]  { --svc-accent: #B7872C; }
[data-svc="about"]     { --svc-accent: #D10A11; }
[data-svc="quote"]     { --svc-accent: #D10A11; }

[data-svc] {
    --svc-bg: #FAF8F4;
    --svc-bg-warm: #F5EFE6;
    --svc-ink: #0A0A0A;
    --svc-ink-soft: #4A4A4A;
    --svc-line: rgba(10, 10, 10, 0.12);
    --svc-line-strong: rgba(10, 10, 10, 0.28);
    --svc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --svc-ease-draw: cubic-bezier(0.65, 0.05, 0.25, 1);
    color: var(--svc-ink);
    background: var(--svc-bg);
    scroll-behavior: smooth;
}

[data-svc] .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 56px);
}

/* ---------- Reveal primitives ---------- */
.svc2-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.9s var(--svc-ease),
        transform 0.9s var(--svc-ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.svc2-reveal.is-in { opacity: 1; transform: translateY(0); }

.svc2-line {
    display: block;
    height: 1px;
    width: 0;
    background: var(--svc-ink);
    transition: width 1.1s var(--svc-ease-draw);
    transition-delay: var(--reveal-delay, 0ms);
}
.svc2-line.is-in { width: 56px; }

/* Section heading row (number + title) */
.svc2-shead {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: clamp(48px, 5vw, 72px);
    position: relative;
}
.svc2-shead__index {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--svc-accent);
    text-transform: uppercase;
    margin: 0;
}
.svc2-shead__title {
    font-family: var(--svc-display, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--svc-ink);
    margin: 0;
    max-width: 22ch;
}
.svc2-shead__title em {
    font-style: normal;
    color: var(--svc-accent);
}

/* =========================================================
   HERO
   ========================================================= */
.svc2-hero {
    position: relative;
    padding: calc(var(--nav-h) + clamp(80px, 11vw, 140px)) 0 clamp(110px, 13vw, 180px);
    background: var(--svc-bg);
    overflow: hidden;
}
.svc2-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 1100px;
}
.svc2-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    margin: 0;
}
.svc2-hero__eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--svc-accent);
}

.svc2-hero__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(2.6rem, 6.8vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--svc-ink);
    margin: 0;
    max-width: 14ch;
}
/* Split-text word reveal — each .svc2-word starts translated and clipped */
.svc2-hero__title .svc2-word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.04em;
    line-height: 1.02;
}
.svc2-hero__title .svc2-word__inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform;
}
.svc2-hero.is-in .svc2-hero__title .svc2-word__inner { transform: translateY(0); }

.svc2-hero__sub {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--svc-ink-soft);
    max-width: 52ch;
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s var(--svc-ease) 0.55s, transform 0.9s var(--svc-ease) 0.55s;
}
.svc2-hero.is-in .svc2-hero__sub {
    opacity: 1;
    transform: translateY(0);
}

.svc2-hero__cta-wrap {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s var(--svc-ease) 0.75s, transform 0.9s var(--svc-ease) 0.75s;
}
.svc2-hero.is-in .svc2-hero__cta-wrap { opacity: 1; transform: translateY(0); }

.svc2-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    color: var(--white);
    background: var(--svc-ink);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.5s var(--svc-ease);
    will-change: transform;
}
.svc2-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--svc-accent);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: 1;
}
.svc2-cta:hover::before { transform: translateY(0); }
.svc2-cta:hover {
    color: var(--white);
    box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--svc-accent) 65%, transparent);
}
.svc2-cta > span {
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc2-cta__arrow {
    position: relative;
    z-index: 2;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc2-cta:hover > span { transform: translateX(-2px); }
.svc2-cta:hover .svc2-cta__arrow { transform: translateX(6px); }
.svc2-cta:active { transform: translateY(1px) scale(0.985); }

/* Service icon in corner */
.svc2-hero__icon {
    position: absolute;
    top: calc(var(--nav-h) + 48px);
    right: clamp(24px, 4vw, 56px);
    width: clamp(72px, 9vw, 130px);
    height: clamp(72px, 9vw, 130px);
    color: var(--svc-accent);
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.6s var(--svc-ease);
}
.svc2-hero__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hero with media (image on the left, text on the right) */
.svc2-hero--media .container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 5.5vw, 88px);
    align-items: center;
    max-width: 1300px;
}
.svc2-hero--media .svc2-hero__icon { display: none; }
.svc2-hero--media .svc2-hero__inner { grid-column: 2; max-width: none; }
.svc2-hero--media .svc2-hero__title { max-width: 14ch; }
.svc2-hero--media .svc2-hero__sub { max-width: 44ch; }

.svc2-hero__media {
    margin: 0;
    position: relative;
    grid-column: 1;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 1.1s var(--svc-ease) 0.15s,
        transform 1.1s var(--svc-ease) 0.15s;
}
.svc2-hero.is-in .svc2-hero__media {
    opacity: 1;
    transform: translateY(0);
}
.svc2-hero__media-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    background: var(--svc-bg-warm);
    box-shadow: 0 36px 80px -32px rgba(10, 10, 10, 0.32);
}
.svc2-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Consistent tonal grade across all five photos */
    filter: saturate(0.95) contrast(1.02) brightness(1.01);
    transform: scale(1) translate(var(--px, 0px), var(--py, 0px));
    transition:
        transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.9s var(--svc-ease);
    will-change: transform;
}
.svc2-hero__media-frame:hover .svc2-hero__image {
    transform: scale(1.02) translate(var(--px, 0px), var(--py, 0px));
}

@media (max-width: 900px) {
    .svc2-hero--media .container {
        grid-template-columns: 1fr;
        gap: clamp(32px, 5vw, 56px);
    }
    .svc2-hero--media .svc2-hero__inner { grid-column: 1; }
    .svc2-hero__media { grid-column: 1; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .svc2-hero__media,
    .svc2-hero__image,
    .svc2-hero__media-frame:hover .svc2-hero__image {
        transition: none !important;
        transform: none !important;
    }
    .svc2-hero__media { opacity: 1; }
}

/* =========================================================
   OVERVIEW
   ========================================================= */
.svc2-overview {
    background: var(--svc-bg);
    padding: clamp(80px, 9vw, 130px) 0;
    border-top: 1px solid var(--svc-line);
}
.svc2-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
}
.svc2-overview__prose p {
    font-family: var(--font-body);
    font-size: clamp(1.08rem, 1.45vw, 1.22rem);
    line-height: 1.6;
    color: var(--svc-ink);
    margin: 0 0 26px;
    max-width: 60ch;
}
.svc2-overview__prose p:last-child { margin-bottom: 0; }
.svc2-overview__prose p strong {
    color: var(--svc-accent);
    font-weight: 600;
}

@media (max-width: 860px) {
    .svc2-overview__grid { grid-template-columns: 1fr; gap: 40px; }
}

.svc2-overview__meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px !important;
    padding-top: 24px;
    border-top: 1px solid var(--svc-line);
    font-family: var(--font-body);
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    color: var(--svc-ink-soft) !important;
    max-width: none !important;
}
.svc2-overview__meta svg {
    flex-shrink: 0;
    color: var(--svc-accent);
}
.svc2-overview__meta-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--svc-accent);
    margin-right: 10px;
}

/* Cobrand block — "Built on AWS" pair, scoped to overview left column */
.cobrand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    color: var(--svc-ink);
    align-self: center;
    max-width: 440px;
}
.cobrand__label {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    margin: 0;
}
.cobrand__logos {
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 38px);
    color: var(--svc-ink);
}
.cobrand__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cobrand__logo--aws svg {
    display: block;
    width: clamp(96px, 11vw, 132px);
    height: auto;
}
.cobrand__logo--brand img {
    display: block;
    width: auto;
    height: clamp(34px, 4vw, 46px);
    /* Enforce pure black regardless of source PNG tone */
    filter: brightness(0);
}
.cobrand__divider {
    display: block;
    width: 1px;
    height: clamp(46px, 5.4vw, 62px);
    background: rgba(10, 10, 10, 0.4);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1s var(--svc-ease-draw) 0.25s;
}
.cobrand.is-in .cobrand__divider { transform: scaleY(1); }
.cobrand__copy {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 40ch;
}
@media (max-width: 860px) {
    .cobrand { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .cobrand__divider {
        transform: scaleY(1) !important;
        transition: none !important;
    }
}

/* =========================================================
   WHAT'S INCLUDED
   ========================================================= */
.svc2-included {
    background: var(--svc-bg-warm);
    padding: clamp(80px, 9vw, 130px) 0;
}
.svc2-included__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.svc2-included__intro {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    margin: 0 0 clamp(28px, 3vw, 44px);
    max-width: 56ch;
}
.svc2-included__item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    padding: clamp(22px, 2.5vw, 32px) clamp(8px, 1.5vw, 20px);
    border-top: 1px solid var(--svc-line);
    transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc2-included__item:last-child { border-bottom: 1px solid var(--svc-line); }
.svc2-included__item::after {
    content: '';
    position: absolute;
    left: clamp(8px, 1.5vw, 20px);
    right: clamp(8px, 1.5vw, 20px);
    bottom: -1px;
    height: 1px;
    background: var(--svc-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.65s var(--svc-ease-draw);
    z-index: 1;
}
.svc2-included__num {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--svc-accent);
}
.svc2-included__body {
    display: grid;
    grid-template-columns: minmax(180px, 24ch) 1fr;
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
}
.svc2-included__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--svc-ink);
    margin: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc2-included__copy {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 56ch;
}
.svc2-included__arrow {
    color: var(--svc-accent);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
    .svc2-included__item:hover {
        background-color: rgba(10, 10, 10, 0.03);
    }
    .svc2-included__item:hover .svc2-included__title {
        transform: translateX(5px);
        color: var(--svc-accent);
    }
    .svc2-included__item:hover .svc2-included__arrow {
        opacity: 1;
        transform: translateX(0);
    }
    .svc2-included__item:hover::after { transform: scaleX(1); }
}
@media (max-width: 760px) {
    .svc2-included__item { grid-template-columns: 48px 1fr; }
    .svc2-included__arrow { display: none; }
    .svc2-included__body {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .svc2-included__copy { max-width: none; }
}
.svc2-included__list--icons .svc2-included__item {
    grid-template-columns: 64px 56px 1fr auto;
}
.svc2-included__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(209, 10, 17, 0.08);
    color: var(--svc-accent);
    transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
    .svc2-included__list--icons .svc2-included__item:hover .svc2-included__icon {
        background: rgba(209, 10, 17, 0.14);
        transform: translateY(-2px);
    }
}
@media (max-width: 760px) {
    .svc2-included__list--icons .svc2-included__item {
        grid-template-columns: 48px 44px 1fr;
        gap: 16px;
    }
    .svc2-included__icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .svc2-included__icon svg {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.svc2-industries {
    background: var(--svc-bg);
    padding: clamp(80px, 9vw, 130px) 0;
    border-top: 1px solid var(--svc-line);
}
.svc2-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
}
.svc2-industry {
    position: relative;
    background: var(--white);
    border: 1px solid var(--svc-line);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.6s var(--svc-ease), box-shadow 0.6s var(--svc-ease), border-color 0.5s var(--svc-ease);
}
.svc2-industry__media {
    position: relative;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: var(--svc-bg-warm);
}
.svc2-industry__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--svc-ease), filter 0.8s var(--svc-ease);
    filter: grayscale(0.2) contrast(1.04);
}
.svc2-industry__body {
    padding: 22px clamp(20px, 2vw, 28px) 28px;
    position: relative;
}
.svc2-industry__body::after {
    content: '';
    position: absolute;
    left: clamp(20px, 2vw, 28px);
    bottom: 14px;
    width: 0;
    height: 1px;
    background: var(--svc-accent);
    transition: width 0.7s var(--svc-ease-draw);
}
.svc2-industry__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--svc-ink);
    margin: 0 0 8px;
    transition: transform 0.5s var(--svc-ease), color 0.5s var(--svc-ease);
}
.svc2-industry__copy {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    margin: 0 0 18px;
}

@media (hover: hover) and (pointer: fine) {
    .svc2-industry:hover {
        transform: translateY(-4px);
        border-color: var(--svc-line-strong);
        box-shadow: 0 26px 50px -28px rgba(10, 10, 10, 0.25);
    }
    .svc2-industry:hover .svc2-industry__media img {
        transform: scale(1.06);
        filter: grayscale(0) contrast(1.06);
    }
    .svc2-industry:hover .svc2-industry__title {
        transform: translateX(4px);
        color: var(--svc-accent);
    }
    .svc2-industry:hover .svc2-industry__body::after { width: 44px; }
}

@media (max-width: 900px) {
    .svc2-industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .svc2-industries__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PROCESS — condensed vertical timeline
   ========================================================= */
.svc2-process {
    --rail-x: clamp(110px, 14vw, 180px);
    background: var(--svc-bg-warm);
    padding: clamp(80px, 9vw, 130px) 0;
    border-top: 1px solid var(--svc-line);
}
.svc2-process__timeline {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}
.svc2-process__rail {
    position: absolute;
    left: var(--rail-x);
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--svc-line);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.6s var(--svc-ease-draw) 0.1s;
}
.svc2-process__timeline.is-in .svc2-process__rail { transform: scaleY(1); }

/* Scroll-driven progress overlay — fills the rail as the user scrolls through */
.svc2-process__rail-fill {
    position: absolute;
    left: var(--rail-x);
    top: 12px;
    width: 1px;
    height: calc((100% - 24px) * var(--progress, 0));
    background: var(--svc-accent);
    opacity: 0;
    transition: opacity 0.5s var(--svc-ease);
    pointer-events: none;
    z-index: 1;
    transform: translateZ(0);
    will-change: height;
}
.svc2-process__timeline.is-in .svc2-process__rail-fill { opacity: 1; }
.svc2-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 80px);
}
.svc2-process__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--rail-x) 1fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;
    cursor: pointer;
    transition: filter 0.4s var(--svc-ease);
}
.svc2-process__num {
    grid-column: 1;
    justify-self: end;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--svc-ink);
    opacity: 0.16;
    transition:
        opacity 0.6s var(--svc-ease),
        color 0.5s var(--svc-ease),
        transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, color;
}
.svc2-process__item.is-in .svc2-process__num { opacity: 1; }
.svc2-process__node {
    position: absolute;
    left: var(--rail-x);
    top: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--svc-accent);
    box-shadow: 0 0 0 4px var(--svc-bg-warm), 0 0 0 5px var(--svc-line);
    transform: scale(0);
    transition:
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.5s var(--svc-ease),
        background-color 0.5s var(--svc-ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 320ms);
    z-index: 2;
}
.svc2-process__item.is-in .svc2-process__node { transform: scale(1); }
.svc2-process__body {
    grid-column: 2;
    padding-left: clamp(16px, 2vw, 28px);
}
.svc2-process__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--svc-ink);
    margin: 0 0 12px;
    transition: transform 0.5s var(--svc-ease), color 0.45s var(--svc-ease);
    will-change: transform;
}
.svc2-process__copy {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 60ch;
    transition: color 0.45s var(--svc-ease);
}

/* Hover state (desktop only) */
@media (hover: hover) and (pointer: fine) {
    .svc2-process__item:hover .svc2-process__num {
        color: var(--svc-accent);
        opacity: 1;
        transition-delay: 0ms;
    }
    .svc2-process__item:hover .svc2-process__node {
        transform: scale(1.4);
        background: var(--svc-accent);
        box-shadow: 0 0 0 4px var(--svc-bg-warm), 0 0 0 5px var(--svc-accent);
        transition-delay: 0ms;
    }
    .svc2-process__item:hover .svc2-process__title {
        transform: translateX(4px);
    }
    .svc2-process__item:hover .svc2-process__copy {
        color: var(--svc-ink);
    }
}
.svc2-process__cta,
.svc2-included__cta,
.svc2-tech__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(56px, 6vw, 88px);
}

@media (max-width: 660px) {
    .svc2-process { --rail-x: 50px; }
    .svc2-process__num { font-size: 2.2rem; }
    .svc2-process__cta,
    .svc2-included__cta,
    .svc2-tech__cta { margin-top: 40px; }
}

/* =========================================================
   TECH / TOOLS
   ========================================================= */
.svc2-tech {
    background: var(--svc-bg);
    padding: clamp(80px, 9vw, 130px) 0;
    border-top: 1px solid var(--svc-line);
}
.svc2-tech__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.svc2-tech__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 18px 14px;
    border: 1px solid var(--svc-line);
    border-radius: 4px;
    background: var(--white);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--svc-ink-soft);
    letter-spacing: -0.01em;
    text-align: center;
    transition:
        color 0.5s var(--svc-ease),
        border-color 0.5s var(--svc-ease),
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease);
}
.svc2-tech__chip img {
    height: 38px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(0.45) opacity(0.8);
    transition: filter 0.5s var(--svc-ease), transform 0.55s var(--svc-ease);
}
@media (hover: hover) and (pointer: fine) {
    .svc2-tech__chip:hover {
        color: var(--svc-ink);
        border-color: var(--svc-accent);
        transform: translateY(-3px);
        box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--svc-accent) 60%, transparent);
    }
    .svc2-tech__chip:hover img {
        filter: grayscale(0) opacity(1);
        transform: scale(1.06);
    }
}

/* =========================================================
   FAQ — accordion
   ========================================================= */
.svc2-faq {
    background: var(--svc-bg-warm);
    padding: clamp(80px, 9vw, 130px) 0;
}
.svc2-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 920px;
}
.svc2-faq__item {
    border-top: 1px solid var(--svc-line);
}
.svc2-faq__item:last-child { border-bottom: 1px solid var(--svc-line); }
.svc2-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 28px 4px;
    background: transparent;
    border: none;
    font: inherit;
    color: var(--svc-ink);
    text-align: left;
    cursor: pointer;
    transition: color 0.4s var(--svc-ease);
}
.svc2-faq__q {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0;
}
.svc2-faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--svc-accent);
}
.svc2-faq__icon::before,
.svc2-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc2-faq__icon::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
}
.svc2-faq__icon::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%);
}
.svc2-faq__item.is-open .svc2-faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.svc2-faq__item.is-open .svc2-faq__icon::after  { transform: translate(-50%, -50%) rotate(45deg); }

.svc2-faq__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc2-faq__a {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--svc-ink-soft);
    margin: 0 0 28px;
    padding-right: 60px;
    max-width: 72ch;
}
@media (hover: hover) and (pointer: fine) {
    .svc2-faq__trigger:hover .svc2-faq__q { color: var(--svc-accent); }
}

/* "Ask us anything else" — bottom of FAQ list */
.svc2-faq__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: clamp(48px, 6vw, 72px);
    text-align: center;
}
.svc2-faq__cta-copy {
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--svc-ink-soft);
    margin: 0;
}

/* =========================================================
   CLOSING CTA
   ========================================================= */
.svc2-close {
    background: var(--svc-ink);
    color: var(--white);
    padding: clamp(120px, 14vw, 170px) 0;
    position: relative;
    overflow: hidden;
}
.svc2-close__inner {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.svc2-close__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 auto 36px;
}
.svc2-close__eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--svc-accent);
}
.svc2-close__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(2.2rem, 5.5vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--white);
    margin: 0 auto 28px;
    max-width: 18ch;
}
.svc2-close__title em {
    font-style: normal;
    color: var(--svc-accent);
}
.svc2-close__sub {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 44px;
    max-width: 52ch;
}
.svc2-close .svc2-cta {
    background: var(--white);
    color: var(--svc-ink);
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.18s var(--svc-ease);
}
.svc2-close .svc2-cta::before { background: var(--svc-accent); }
.svc2-close .svc2-cta:hover {
    color: var(--white);
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.2s var(--svc-ease) 0.3s;
}

@media (max-width: 600px) {
    .hp-carousel__slide { width: 90%; }
    .hp-carousel__track { height: 480px; }
    .hp-svc__media { aspect-ratio: 16 / 11; }
    .hp-svc__body { padding: 24px 22px 26px; }
    .hp-svc__title { font-size: 1.4rem; }
    .hp-svc__arrow { top: 22px; right: 22px; }
    .hp-section-head { margin-bottom: 56px; }
    .hp-hero__sub { margin: 32px auto 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-reveal,
    .hp-mask__inner,
    .hp-section-line,
    .hp-btn,
    .hp-btn::before,
    .hp-carousel__slide,
    .hp-process__rail,
    .hp-process__num,
    .hp-process__node,
    .hp-process__title,
    .hp-process__title::after,
    .hp-process__copy,
    .hp-edge__row,
    .hp-edge__cell,
    .hp-edge__num,
    .hp-edge__title,
    .hp-edge__copy,
    .hp-edge__row::after,
    .hp-edge__row::before,
    .hp-edge__row-inner::after {
        transition: none !important;
        animation: none !important;
    }
    .hp-edge__row::after,
    .hp-edge__list .hp-edge__row:first-child::before { transform: scaleX(1); }
    .hp-edge__row-inner::after { transform: scaleY(1); }
    .hp-reveal { opacity: 1; transform: none; }
    .hp-mask__inner { transform: none; }
    .hp-section-head .hp-section-line { width: 56px; }
    .hp-process__rail { transform: scaleY(1); }
    .hp-process__num { opacity: 1; transform: none; font-weight: 700; letter-spacing: -0.055em; }
    .hp-process__node { transform: scale(1); }
}

/* =========================================================
   ABOUT PAGE — extends the svc2-* design system
   ========================================================= */

/* Hero — two-column with founder portrait */
.abt-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.abt-hero__text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.abt-hero__media {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 1.1s var(--svc-ease) 0.45s,
        transform 1.1s var(--svc-ease) 0.45s;
    perspective: 1100px;
    perspective-origin: center 40%;
}
.svc2-hero.is-in .abt-hero__media { opacity: 1; transform: translateY(0); }

.abt-hero__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--svc-bg-warm);
    box-shadow: 0 30px 60px -34px rgba(10, 10, 10, 0.35);
    cursor: pointer;
    transform-style: preserve-3d;
    transform:
        rotateY(var(--rx, 0deg))
        rotateX(var(--ry, 0deg));
    transition:
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.6s var(--svc-ease);
    will-change: transform, box-shadow;
}
.abt-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at calc(50% + var(--gx, 0%)) calc(50% + var(--gy, 0%)),
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0) 45%
    );
    opacity: 0;
    transition: opacity 0.6s var(--svc-ease);
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}
.abt-hero__photo:hover {
    box-shadow: 0 48px 90px -32px rgba(10, 10, 10, 0.5);
}
.abt-hero__photo:hover::after {
    opacity: 1;
}
.abt-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(0.12) contrast(1.05);
    transform: scale(1) translate(var(--px, 0px), var(--py, 0px));
    transition:
        transform 1s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.7s var(--svc-ease);
    will-change: transform, filter;
}
.abt-hero__photo:hover img {
    transform: scale(1.04) translate(var(--px, 0px), var(--py, 0px));
    filter: grayscale(0) contrast(1.04) saturate(1.05);
}
.abt-hero__caption {
    margin: 22px 0 0;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    transition:
        color 0.55s var(--svc-ease),
        letter-spacing 0.55s var(--svc-ease);
}
.abt-hero__media:hover .abt-hero__caption {
    color: var(--svc-ink);
    letter-spacing: 0.32em;
}
@media (prefers-reduced-motion: reduce) {
    .abt-hero__photo,
    .abt-hero__photo:hover,
    .abt-hero__photo img,
    .abt-hero__photo:hover img {
        transform: none !important;
        transition: none !important;
    }
}
@media (max-width: 860px) {
    .abt-hero__inner { grid-template-columns: 1fr; gap: 48px; }
    .abt-hero__media { max-width: 480px; }
}

/* Alt-bg modifier so 'How We Work' breaks the warm rhythm */
.svc2-included.svc2-included--alt {
    background: var(--svc-bg);
}

/* Closing CTA — the strongest moment on the page */
.abt-close {
    position: relative;
    background: var(--svc-ink);
    color: var(--white);
    padding: clamp(140px, 17vw, 220px) 0 clamp(160px, 18vw, 240px);
    overflow: hidden;
}
.abt-close__grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.04;
    pointer-events: none;
}
.abt-close__inner {
    position: relative;
    max-width: 980px;
}
.abt-close__line {
    display: block;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 0 48px;
    transition: width 1.4s var(--svc-ease-draw);
    transition-delay: var(--reveal-delay, 0ms);
}
.abt-close__line.is-in { width: 88px; }

.abt-close__mark {
    display: block;
    width: clamp(80px, 9vw, 130px);
    height: auto;
    margin: 0 0 48px;
    opacity: 1;
}

.abt-close__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2.8rem, 9vw, 6.8rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--white);
    margin: 0 0 36px;
    max-width: 16ch;
}
.abt-close__title em {
    font-style: normal;
    color: var(--svc-accent);
}

.abt-close__sub {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 60ch;
    margin: 0 0 56px;
}

.abt-close__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
}

/* The CTA button on the dark closer mirrors the homepage closer pattern */
.abt-close .svc2-cta {
    background: var(--white);
    color: var(--svc-ink);
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.18s var(--svc-ease);
}
.abt-close .svc2-cta::before { background: var(--svc-accent); }
.abt-close .svc2-cta:hover {
    color: var(--white);
    box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--svc-accent) 60%, transparent);
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.2s var(--svc-ease) 0.3s;
}

.abt-close__link {
    position: relative;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.4;
    padding-bottom: 4px;
    transition: color 0.4s var(--svc-ease);
}
.abt-close__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.abt-close__link:hover { color: var(--white); }
.abt-close__link:hover::after { transform: scaleX(1); }

@media (max-width: 660px) {
    .abt-close__title { letter-spacing: -0.03em; }
    .abt-close__line { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .abt-hero__media,
    .abt-close__line,
    .abt-close__link::after {
        transition: none !important;
    }
    .abt-hero__media { opacity: 1; transform: none; }
    .abt-close__line.is-in { width: 88px; }
}

/* =========================================================
   QUOTE PAGE — extends the svc2-* design system
   ========================================================= */

.qt-page {
    background: var(--svc-bg);
    padding: calc(var(--nav-h) + clamp(56px, 7vw, 96px)) 0 clamp(80px, 10vw, 130px);
}
.qt-grid {
    display: grid;
    grid-template-columns: 0.72fr 1fr;
    gap: clamp(48px, 7vw, 120px);
    align-items: start;
}
@media (max-width: 920px) {
    .qt-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* ---------- Left column ---------- */
.qt-side {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 52px);
}
.qt-side__logo {
    display: inline-block;
}
.qt-side__logo img {
    height: clamp(40px, 4vw, 56px);
    width: auto;
    display: block;
}
.qt-side__lede {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 38ch;
}
.qt-side__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.qt-side__heading {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-accent);
    margin: 0;
}
.qt-side__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qt-side__list li {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--svc-ink);
}
.qt-link {
    position: relative;
    display: inline-block;
    color: var(--svc-ink);
    text-decoration: none;
    padding-bottom: 3px;
    transition: color 0.4s var(--svc-ease);
}
.qt-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-link:hover { color: var(--svc-accent); }
.qt-link:hover::after { transform: scaleX(1); }
.qt-side__socials {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}
.qt-side__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--svc-line);
    border-radius: 999px;
    color: var(--svc-ink-soft);
    text-decoration: none;
    transition:
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-side__socials a svg {
    width: 18px;
    height: 18px;
    display: block;
}
.qt-side__socials a:hover {
    background: var(--svc-accent);
    border-color: var(--svc-accent);
    color: var(--white);
    transform: translateY(-2px);
}

/* ---------- Right column ---------- */
.qt-form-wrap {
    position: relative;
    isolation: isolate;
}

/* Faint atmospheric photo behind the form column only */
.qt-form-bg {
    position: absolute;
    inset: -36px -28px;
    overflow: hidden;
    border-radius: 10px;
    z-index: -1;
    pointer-events: none;
    /* Soft fade-out at the bottom (and a touch at the top) so the photo
       blends into the page background instead of stopping with a hard edge. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 1) 6%,
        rgba(0, 0, 0, 1) 70%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 1) 6%,
        rgba(0, 0, 0, 1) 70%,
        transparent 100%
    );
}
.qt-form-bg__img {
    position: absolute;
    top: -120px;
    left: 0;
    width: 100%;
    height: calc(100% + 240px);
    object-fit: cover;
    opacity: 0.55;
    /* Same tonal grade used elsewhere on the site */
    filter: saturate(0.9) contrast(1.0) brightness(1.0);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.qt-form-bg__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 70% 55% at 50% 50%,
            rgba(250, 248, 244, 0.08) 0%,
            rgba(250, 248, 244, 0.32) 65%,
            rgba(250, 248, 244, 0.58) 100%
        ),
        linear-gradient(
            180deg,
            rgba(250, 248, 244, 0.35) 0%,
            rgba(250, 248, 244, 0.1) 50%,
            rgba(250, 248, 244, 0.45) 100%
        );
}
@media (prefers-reduced-motion: reduce) {
    .qt-form-bg__img { transform: none !important; }
}

.qt-form-head {
    margin-bottom: clamp(32px, 4vw, 52px);
}
.qt-form-head__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: var(--svc-ink);
    margin: 0 0 14px;
    max-width: 18ch;
    text-shadow: 0 1px 0 rgba(250, 248, 244, 0.8);
}
.qt-form-head__title em {
    font-style: normal;
    color: var(--svc-accent);
}
.qt-form-head__sub {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--svc-ink);
    margin: 0;
    max-width: 50ch;
    text-shadow: 0 1px 0 rgba(250, 248, 244, 0.7);
}

/* Stagger entrance on form fields once the form reveals */
.qt-form > .qt-field,
.qt-form > .qt-chips__group,
.qt-form > .qt-form__submit-row {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.qt-form.is-in > .qt-field:nth-child(1),
.qt-form.svc2-reveal.is-in > .qt-field:nth-child(1) { transition-delay: 80ms; }
.qt-form.is-in > *:nth-child(2)  { transition-delay: 140ms; }
.qt-form.is-in > *:nth-child(3)  { transition-delay: 200ms; }
.qt-form.is-in > *:nth-child(4)  { transition-delay: 260ms; }
.qt-form.is-in > *:nth-child(5)  { transition-delay: 320ms; }
.qt-form.is-in > *:nth-child(6)  { transition-delay: 380ms; }
.qt-form.is-in > *:nth-child(7)  { transition-delay: 440ms; }
.qt-form.is-in > *:nth-child(8)  { transition-delay: 500ms; }
.qt-form.is-in > *:nth-child(9)  { transition-delay: 560ms; }
.qt-form.is-in > *:nth-child(10) { transition-delay: 620ms; }
.qt-form.is-in > .qt-field,
.qt-form.is-in > .qt-chips__group,
.qt-form.is-in > .qt-form__submit-row {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .qt-form > .qt-field,
    .qt-form > .qt-chips__group,
    .qt-form > .qt-form__submit-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Form ---------- */
.qt-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform-origin: 50% 40%;
    transition:
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.qt-form.is-leaving {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-18px) scale(0.96);
    filter: blur(6px);
}

.qt-field {
    position: relative;
    display: block;
}
.qt-field input,
.qt-field textarea {
    width: 100%;
    padding: 24px 18px 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--svc-ink);
    background: var(--white);
    border: 1px solid var(--svc-line);
    border-radius: 6px;
    outline: none;
    appearance: none;
    box-shadow: 0 14px 30px -22px rgba(10, 10, 10, 0.35);
    transform: translateY(0);
    transition:
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field:hover input,
.qt-field:hover textarea {
    border-color: rgba(10, 10, 10, 0.32);
    box-shadow: 0 20px 38px -22px rgba(10, 10, 10, 0.4);
}
.qt-field textarea {
    min-height: 180px;
    resize: vertical;
    padding-top: 30px;
}
.qt-field input::placeholder,
.qt-field textarea::placeholder {
    color: transparent;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field input:focus::placeholder,
.qt-field textarea:focus::placeholder {
    color: rgba(74, 74, 74, 0.45);
}
.qt-field input:focus,
.qt-field textarea:focus {
    border-color: var(--svc-accent);
    background: var(--white);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--svc-accent) 18%, transparent),
        0 26px 50px -22px rgba(10, 10, 10, 0.45);
}
.qt-field__label {
    position: absolute;
    left: 18px;
    top: 20px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--svc-ink-soft);
    pointer-events: none;
    transform-origin: left top;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field--textarea .qt-field__label { top: 22px; }
.qt-field input:focus ~ .qt-field__label,
.qt-field input:not(:placeholder-shown) ~ .qt-field__label,
.qt-field textarea:focus ~ .qt-field__label,
.qt-field textarea:not(:placeholder-shown) ~ .qt-field__label {
    transform: translateY(-14px) scale(0.78);
}
.qt-field input:focus ~ .qt-field__label,
.qt-field textarea:focus ~ .qt-field__label {
    color: var(--svc-accent);
}
.qt-field__optional {
    font-size: 0.78em;
    opacity: 0.7;
    margin-left: 6px;
}

/* ---------- Phone field (country code + number, unified) ---------- */
.qt-field--tel .qt-tel {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--svc-line);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 14px 30px -22px rgba(10, 10, 10, 0.35);
    transform: translateY(0);
    transition:
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field--tel:hover .qt-tel {
    border-color: rgba(10, 10, 10, 0.32);
    box-shadow: 0 20px 38px -22px rgba(10, 10, 10, 0.4);
}
.qt-field--tel .qt-tel:focus-within {
    border-color: var(--svc-accent);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--svc-accent) 18%, transparent),
        0 26px 50px -22px rgba(10, 10, 10, 0.45);
}
.qt-tel__dial {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background-color: transparent;
    padding: 24px 30px 10px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--svc-ink);
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
    min-width: 0;
    flex-shrink: 0;
    transition: color 0.3s var(--svc-ease);
}
.qt-tel__dial:focus-visible { color: var(--svc-accent); }
.qt-tel__divider {
    width: 1px;
    background: var(--svc-line);
    align-self: stretch;
    margin: 10px 0;
    flex-shrink: 0;
}
.qt-tel__wrap {
    position: relative;
    flex: 1;
    display: block;
    min-width: 0;
}
/* Wrapper owns the visual treatment — strip the base .qt-field input look */
.qt-field--tel .qt-tel__input,
.qt-field--tel .qt-tel__input:hover,
.qt-field--tel .qt-tel__input:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    padding: 24px 18px 10px;
    width: 100%;
}
.qt-field--tel:hover .qt-tel__input { transform: none; }
.qt-tel__label { left: 18px; }
@media (max-width: 480px) {
    .qt-tel__dial { padding-left: 14px; padding-right: 26px; font-size: 0.95rem; }
    .qt-field--tel .qt-tel__input { padding-left: 14px; }
    .qt-tel__label { left: 14px; }
}

.qt-field__error {
    display: block;
    font-size: 0.84rem;
    color: var(--svc-accent);
    line-height: 1.4;
    margin-top: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field.is-invalid input,
.qt-field.is-invalid textarea {
    border-color: var(--svc-accent);
}
.qt-field.is-invalid .qt-field__error {
    max-height: 48px;
    opacity: 1;
}
.qt-field__counter {
    display: block;
    text-align: right;
    font-size: 0.78rem;
    color: var(--svc-ink-soft);
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field.is-typing .qt-field__counter {
    opacity: 1;
}

/* ---------- Chip multi-select ---------- */
.qt-chips__group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 2px;
}
.qt-chips__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
}
.qt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.qt-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid var(--svc-line);
    border-radius: 999px;
    color: var(--svc-ink-soft);
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 8px 20px -16px rgba(10, 10, 10, 0.35);
    transition:
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
.qt-chip:hover {
    border-color: var(--svc-line-strong);
    color: var(--svc-ink);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(10, 10, 10, 0.4);
}
.qt-chip:has(input:checked) {
    background: var(--svc-accent);
    border-color: var(--svc-accent);
    color: var(--white);
    transform: scale(1.05);
    box-shadow:
        0 12px 26px -10px color-mix(in srgb, var(--svc-accent) 55%, transparent),
        0 0 0 4px color-mix(in srgb, var(--svc-accent) 14%, transparent);
}
.qt-chip.is-bump { animation: qtChipBump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes qtChipBump {
    0%   { transform: scale(1.04); }
    35%  { transform: scale(1.1); }
    100% { transform: scale(1.04); }
}

/* ---------- Submit row + footnotes ---------- */
.qt-form__submit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
}
.qt-form__note {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--svc-ink-soft);
    line-height: 1.55;
    margin: 4px 0 0;
}
.qt-form__error {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--svc-accent);
    margin: 12px 0 0;
}

/* ---------- Post-submit success state ---------- */
.qt-success {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 6px 0;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-success.is-shown { opacity: 1; }

/* Staged entrance for children */
.qt-success > * {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-success.is-shown > .qt-success__badge       { transition-delay: 0.05s; }
.qt-success.is-shown > .qt-success__title       { transition-delay: 0.45s; }
.qt-success.is-shown > .qt-success__sub         { transition-delay: 0.62s; }
.qt-success.is-shown > .qt-success__actions     { transition-delay: 0.78s; }
.qt-success.is-shown > .qt-success__closenote   { transition-delay: 0.92s; }
.qt-success.is-shown > * {
    opacity: 1;
    transform: translateY(0);
}

/* Animated check badge with pulsing concentric rings */
.qt-success__badge {
    position: relative;
    width: 78px;
    height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--svc-accent);
    /* Override the staged entrance with a more dramatic pop */
    transform: translateY(0) scale(0.2) !important;
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.qt-success.is-shown > .qt-success__badge {
    transform: translateY(0) scale(1) !important;
}
.qt-success__badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--svc-accent);
    opacity: 0.08;
}
.qt-success__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--svc-accent);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
}
.qt-success.is-shown .qt-success__ring--1 {
    animation: qtSuccessRing 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s infinite;
}
.qt-success.is-shown .qt-success__ring--2 {
    animation: qtSuccessRing 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s infinite;
}
.qt-success.is-shown .qt-success__ring--3 {
    animation: qtSuccessRing 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.5s infinite;
}
@keyframes qtSuccessRing {
    0%   { transform: scale(0.6); opacity: 0.6; }
    70%  { opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
.qt-success__check {
    position: relative;
    width: 56px;
    height: 56px;
    color: var(--svc-accent);
    z-index: 1;
}
.qt-success__check-circle {
    stroke-dasharray: 138.2;
    stroke-dashoffset: 138.2;
    opacity: 0.35;
}
.qt-success__check-tick {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}
.qt-success.is-shown .qt-success__check-circle {
    animation: qtCheckCircle 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
.qt-success.is-shown .qt-success__check-tick {
    animation: qtCheckTick 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards;
}
@keyframes qtCheckCircle {
    to { stroke-dashoffset: 0; }
}
@keyframes qtCheckTick {
    to { stroke-dashoffset: 0; }
}

.qt-success__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--svc-ink);
    margin: 0;
    max-width: 16ch;
}
.qt-success__title em {
    font-style: normal;
    color: var(--svc-accent);
    display: inline-block;
    transform-origin: 0% 80%;
    transform: scale(0.85);
    opacity: 0;
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s,
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s;
}
.qt-success.is-shown .qt-success__title em {
    transform: scale(1);
    opacity: 1;
}
.qt-success__sub {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 52ch;
}
.qt-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}
.qt-success.is-shown .qt-success__actions .qt-btn-secondary {
    animation: qtBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.qt-success.is-shown .qt-success__actions .qt-btn-secondary:nth-child(1) { animation-delay: 0.95s; }
.qt-success.is-shown .qt-success__actions .qt-btn-secondary:nth-child(2) { animation-delay: 1.05s; }
@keyframes qtBtnPop {
    0%   { transform: translateY(10px) scale(0.92); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.qt-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid var(--svc-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--svc-ink);
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-btn-secondary svg {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-btn-secondary:hover {
    background: var(--svc-ink);
    color: var(--white);
    border-color: var(--svc-ink);
}
.qt-btn-secondary:hover svg { transform: translateX(4px); }
.qt-success__closenote {
    font-size: 0.9rem;
    color: var(--svc-ink-soft);
    margin: 4px 0 0;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .qt-form,
    .qt-success,
    .qt-success > *,
    .qt-success__badge,
    .qt-success__title em,
    .qt-field input,
    .qt-field textarea,
    .qt-field__label,
    .qt-field__error,
    .qt-field__counter,
    .qt-chip {
        transition: none !important;
        animation: none !important;
    }
    .qt-form { opacity: 1; transform: none; filter: none; }
    .qt-success,
    .qt-success > *,
    .qt-success__title em {
        opacity: 1;
        transform: none !important;
    }
    .qt-success__check-circle,
    .qt-success__check-tick {
        stroke-dashoffset: 0 !important;
    }
    .qt-success__ring { display: none; }
}

/* =========================================================
   BRANDING — LOGO CONSTRUCTION DIAGRAM
   Self-referential overlay shown on the Branding service page
   overview, in the previously-empty left column.
   ========================================================= */

.svc2-overview--with-figure .svc2-overview__grid {
    align-items: center;
}

.brd-construct {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 400px;
}
.brd-construct__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    position: relative;
    padding-left: 44px;
}
.brd-construct__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.brd-construct__frame {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    cursor: pointer;
    perspective: 900px;
}
.brd-construct__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    will-change: transform;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.brd-construct__frame[data-tilting="1"] .brd-construct__svg {
    transition: transform 0.08s linear;
}
.brd-construct__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: auto;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.45s,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    filter: brightness(0);
}
.brd-construct.is-in .brd-construct__logo { opacity: 1; }

.brd-construct__caption {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    max-width: 36ch;
    margin: 0;
}

/* ----- SVG construction primitives ----- */
.brd-construct__line {
    fill: none;
    stroke: color-mix(in srgb, var(--svc-accent) 55%, transparent);
    stroke-width: 0.8;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0.05, 0.25, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.brd-construct__line--faint {
    stroke: color-mix(in srgb, var(--svc-accent) 32%, transparent);
}
.brd-construct.is-in .brd-construct__line { stroke-dashoffset: 0; }

.brd-construct__anchor {
    stroke: color-mix(in srgb, var(--svc-accent) 75%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.brd-construct.is-in .brd-construct__anchor { opacity: 1; }

.brd-construct__measure {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 500;
    fill: color-mix(in srgb, var(--svc-accent) 60%, transparent);
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.brd-construct.is-in .brd-construct__measure { opacity: 1; }

/* ----- Continuous ambient motion (kicks in after initial draw) ----- */
.brd-construct__rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: brdRotate 36s linear infinite;
    animation-play-state: paused;
}
.brd-construct.is-in .brd-construct__rotor { animation-play-state: running; }
@keyframes brdRotate {
    to { transform: rotate(360deg); }
}

.brd-construct__pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: brdPulse 5.5s ease-in-out infinite;
    animation-play-state: paused;
    animation-delay: 1.6s;
}
.brd-construct.is-in .brd-construct__pulse { animation-play-state: running; }
@keyframes brdPulse {
    0%, 100% { transform: scale(1); stroke-opacity: 0.55; }
    50%      { transform: scale(1.05); stroke-opacity: 1; }
}

.brd-construct__anchor--breath {
    animation: brdBreath 3.4s ease-in-out infinite;
    animation-play-state: paused;
    animation-delay: var(--breath-delay, 0s);
}
.brd-construct.is-in .brd-construct__anchor--breath { animation-play-state: running; }
@keyframes brdBreath {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ----- Helper guides revealed on hover (dotted, gold) ----- */
.brd-construct__helper {
    fill: none;
    stroke: color-mix(in srgb, var(--svc-accent) 50%, transparent);
    stroke-width: 0.7;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.brd-construct__helper--rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: brdRotateReverse 50s linear infinite;
    animation-play-state: paused;
}
@keyframes brdRotateReverse {
    to { transform: rotate(-360deg); }
}

@media (hover: hover) and (pointer: fine) {
    .brd-construct__frame:hover .brd-construct__line { stroke-opacity: 1; }
    .brd-construct__frame:hover .brd-construct__line--faint { stroke-opacity: 0.85; }
    .brd-construct__frame:hover .brd-construct__helper { opacity: 1; }
    .brd-construct__frame:hover .brd-construct__helper--rotor { animation-play-state: running; }
    .brd-construct__frame:hover .brd-construct__measure { opacity: 1; fill: color-mix(in srgb, var(--svc-accent) 85%, transparent); }
    .brd-construct__frame:hover .brd-construct__logo { transform: translate(-50%, -50%) scale(1.04); }
}

/* ----- Click-to-replay reset state (disables transitions briefly) ----- */
.brd-construct.is-resetting,
.brd-construct.is-resetting * {
    transition: none !important;
}
.brd-construct.is-resetting .brd-construct__line { stroke-dashoffset: 1; }
.brd-construct.is-resetting .brd-construct__anchor,
.brd-construct.is-resetting .brd-construct__measure,
.brd-construct.is-resetting .brd-construct__logo { opacity: 0; }

@media (max-width: 860px) {
    .brd-construct {
        max-width: 360px;
        margin: 0 auto 8px;
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brd-construct__line,
    .brd-construct__anchor,
    .brd-construct__measure,
    .brd-construct__logo,
    .brd-construct__rotor,
    .brd-construct__pulse,
    .brd-construct__anchor--breath,
    .brd-construct__helper--rotor {
        transition: none !important;
        animation: none !important;
    }
    .brd-construct__line { stroke-dashoffset: 0; }
    .brd-construct__anchor,
    .brd-construct__measure,
    .brd-construct__logo { opacity: 1; }
}

/* =========================================================
   BLOG INDEX — "Writing" page
   Extends the svc2-* design system via [data-svc="blog"]
   ========================================================= */

.bw-page { background: var(--svc-bg); }

.bw-head {
    padding: calc(var(--nav-h) + clamp(70px, 9vw, 130px)) 0 clamp(56px, 7vw, 96px);
    background: var(--svc-bg);
}
.bw-head__inner { max-width: 1080px; }
.bw-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    margin: 0 0 28px;
}
.bw-head__eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--svc-accent);
}
.bw-head__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6.6rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--svc-ink);
    margin: 0 0 28px;
    max-width: 16ch;
}
.bw-head__sub {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 52ch;
}

.bw-featured {
    background: var(--svc-bg);
    padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 9vw, 120px);
    border-top: 1px solid var(--svc-line);
}
.bw-featured__card {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: clamp(16px, 1.6vw, 24px);
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0);
    will-change: transform;
    transition:
        background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-featured__card:focus-visible {
    outline: 2px solid var(--svc-accent);
    outline-offset: 4px;
    border-radius: 10px;
}
.bw-featured__media {
    position: relative;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    border-radius: 4px;
    background: var(--svc-bg-warm);
}
.bw-featured__media--photo { aspect-ratio: 3 / 2; }
.bw-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-featured__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    background: var(--svc-ink);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 999px;
}
.bw-featured__body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.bw-cat {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--svc-line);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--svc-accent);
    background: transparent;
}
.bw-featured__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: var(--svc-ink);
    margin: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-featured__excerpt {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 48ch;
}
.bw-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--svc-ink-soft);
}
.bw-meta__dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}
.bw-featured__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding-bottom: 3px;
    color: var(--svc-ink);
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 500;
    text-decoration: none;
}
.bw-featured__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-featured__link svg { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@media (hover: hover) and (pointer: fine) {
    .bw-featured__card:hover {
        background-color: var(--white);
        border-color: rgba(10, 10, 10, 0.06);
        transform: translateY(-4px);
        box-shadow: 0 28px 56px -28px rgba(10, 10, 10, 0.24);
    }
    .bw-featured__card:hover .bw-featured__media img { transform: scale(1.02); }
    .bw-featured__card:hover .bw-featured__title { color: var(--svc-accent); }
    .bw-featured__card:hover .bw-featured__excerpt { color: var(--svc-ink); }
    .bw-featured__card:hover .bw-featured__link::after { transform: scaleX(1); }
    .bw-featured__card:hover .bw-featured__link svg { transform: translateX(4px); }
}

@media (max-width: 860px) {
    .bw-featured__card { grid-template-columns: 1fr; gap: 30px; }
}

.bw-grid-wrap {
    background: var(--svc-bg);
    padding: clamp(48px, 6vw, 96px) 0 clamp(80px, 9vw, 130px);
    border-top: 1px solid var(--svc-line);
}
.bw-grid-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(36px, 4vw, 56px);
}
.bw-grid-head__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--svc-ink);
    margin: 0;
}
.bw-grid-head__count {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--svc-ink-soft);
    letter-spacing: 0.04em;
}
.bw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 44px) clamp(20px, 2.5vw, 32px);
}
.bw-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    padding: 10px 10px 22px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid transparent;
    will-change: transform;
    transition:
        background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-card__media {
    position: relative;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
    border-radius: 4px;
    background: var(--svc-bg-warm);
}
.bw-card__media--photo { aspect-ratio: 3 / 2; }
.bw-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 6px;
}
.bw-card__cat {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--svc-accent);
    margin: 0;
}
.bw-card__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.55vw, 1.4rem);
    line-height: 1.22;
    letter-spacing: -0.022em;
    color: var(--svc-ink);
    margin: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bw-card__excerpt {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 44ch;
}
.bw-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--svc-ink-soft);
    margin-top: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .bw-card:hover {
        background-color: var(--white);
        border-color: rgba(10, 10, 10, 0.06);
        transform: translateY(-4px);
        box-shadow: 0 22px 46px -24px rgba(10, 10, 10, 0.22);
    }
    .bw-card:hover .bw-card__media img { transform: scale(1.03); }
    .bw-card:hover .bw-card__title { color: var(--svc-accent); }
    .bw-card:hover .bw-card__excerpt { color: var(--svc-ink); }
}
.bw-card:focus-visible {
    outline: 2px solid var(--svc-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

@media (max-width: 960px) {
    .bw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .bw-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

.bw-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(48px, 6vw, 80px);
}
.bw-loadmore[hidden] { display: none; }

.bw-close {
    background: var(--svc-ink);
    color: var(--white);
    padding: clamp(100px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}
.bw-close__inner {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.bw-close__title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.4vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--white);
    margin: 0 auto 28px;
    max-width: 16ch;
}
.bw-close__title em {
    font-style: normal;
    color: var(--svc-accent);
}
.bw-close__actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.bw-close .svc2-cta {
    background: var(--white);
    color: var(--svc-ink);
    /* Snap back to ink quickly on hover-out so text never sits white on a still-white pill */
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.18s var(--svc-ease);
}
.bw-close .svc2-cta::before { background: var(--svc-accent); }
.bw-close .svc2-cta:hover {
    color: var(--white);
    /* Hold the label ink until the red fill is well underway, then flip white */
    transition:
        transform 0.55s var(--svc-ease),
        box-shadow 0.55s var(--svc-ease),
        color 0.2s var(--svc-ease) 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .bw-featured__media img,
    .bw-featured__title,
    .bw-featured__link::after,
    .bw-featured__link svg,
    .bw-card__media img,
    .bw-card__title {
        transition: none !important;
    }
}

/* =========================================================
   MOBILE APPS — PHONE ARCHITECTURE DIAGRAM
   Shown on the Mobile App Development service page overview,
   in the previously-empty left column.
   ========================================================= */

.mob-arch {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 320px;
}
.mob-arch__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    position: relative;
    padding-left: 44px;
}
.mob-arch__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.mob-arch__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 280 / 580;
}
.mob-arch__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* Brand glyph rendered inside the SVG header zone — pure black */
.mob-arch__brand { filter: brightness(0); }
.mob-arch__caption {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    max-width: 38ch;
    margin: 0;
}

/* ----- Animated wireframe lines ----- */
.mob-arch__line {
    fill: none;
    stroke: var(--svc-accent);
    stroke-width: 1.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 0.95s cubic-bezier(0.65, 0.05, 0.25, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.mob-arch__line--guide {
    stroke: color-mix(in srgb, var(--svc-accent) 32%, transparent);
    stroke-width: 0.7;
}
.mob-arch.is-in .mob-arch__line { stroke-dashoffset: 0; }

.mob-arch__fade {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.mob-arch.is-in .mob-arch__fade { opacity: 1; }

.mob-arch__anchor {
    stroke: color-mix(in srgb, var(--svc-accent) 70%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.mob-arch.is-in .mob-arch__anchor { opacity: 1; }

.mob-arch__measure {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 500;
    fill: color-mix(in srgb, var(--svc-accent) 62%, transparent);
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.mob-arch.is-in .mob-arch__measure { opacity: 1; }

.mob-arch__textline {
    stroke: color-mix(in srgb, var(--svc-accent) 55%, transparent);
    stroke-width: 1;
    stroke-linecap: round;
    fill: none;
    vector-effect: non-scaling-stroke;
}
.mob-arch__time {
    font-family: var(--font-body);
    font-size: 7px;
    font-weight: 600;
    fill: var(--svc-accent);
}

/* ----- Interactive zones ----- */
.mob-arch__zone-outline {
    fill: none;
    stroke: var(--svc-accent);
    stroke-width: 1.2;
    stroke-opacity: 0.7;
    transition:
        stroke-opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        stroke-width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    vector-effect: non-scaling-stroke;
}
.mob-arch__zone-fill {
    fill: var(--svc-accent);
    fill-opacity: 0;
    transition: fill-opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mob-arch__zone-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
}
.mob-arch__zone-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    fill: var(--svc-ink);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mob-arch__zone-tick {
    stroke: var(--svc-accent);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .mob-arch__zone:hover .mob-arch__zone-outline {
        stroke-opacity: 1;
        stroke-width: 1.7;
    }
    .mob-arch__zone:hover .mob-arch__zone-fill { fill-opacity: 0.14; }
    .mob-arch__zone:hover .mob-arch__zone-label { opacity: 1; }
    .mob-arch__zone:hover .mob-arch__zone-tick { opacity: 1; }
}

@media (max-width: 860px) {
    .mob-arch {
        max-width: 280px;
        margin: 0 auto 8px;
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mob-arch__line,
    .mob-arch__fade,
    .mob-arch__anchor,
    .mob-arch__measure,
    .mob-arch__zone-outline,
    .mob-arch__zone-fill,
    .mob-arch__zone-label,
    .mob-arch__zone-tick {
        transition: none !important;
    }
    .mob-arch__line { stroke-dashoffset: 0; }
    .mob-arch__fade,
    .mob-arch__anchor,
    .mob-arch__measure { opacity: 1; }
}

/* =========================================================
   AI — RAG ARCHITECTURE DIAGRAM
   Self-referential overlay on the AI-Powered Solutions
   overview, mirroring the mob-arch construction treatment.
   ========================================================= */

.ai-rag {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 460px;
}
.ai-rag__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    position: relative;
    padding-left: 44px;
}
.ai-rag__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.ai-rag__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.ai-rag__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ai-rag__caption {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    max-width: 44ch;
    margin: 0;
}

.ai-rag__line {
    fill: none;
    stroke: var(--svc-accent);
    stroke-width: 1.3;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0.05, 0.25, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.ai-rag__line--guide {
    stroke: color-mix(in srgb, var(--svc-accent) 26%, transparent);
    stroke-width: 0.7;
}
.ai-rag.is-in .ai-rag__line { stroke-dashoffset: 0; }

.ai-rag__fade {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.ai-rag.is-in .ai-rag__fade { opacity: 1; }

.ai-rag__arrow {
    fill: var(--svc-accent);
}

.ai-rag__anchor {
    stroke: color-mix(in srgb, var(--svc-accent) 70%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.ai-rag.is-in .ai-rag__anchor { opacity: 1; }

.ai-rag__measure {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    fill: color-mix(in srgb, var(--svc-accent) 62%, transparent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.ai-rag.is-in .ai-rag__measure { opacity: 1; }

.ai-rag__node-rect {
    fill: none;
    stroke: var(--svc-accent);
    stroke-width: 1.3;
    stroke-opacity: 0.88;
    vector-effect: non-scaling-stroke;
    transition:
        stroke-opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        stroke-width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-rag__node-rect--strong {
    stroke-width: 1.9;
    stroke-opacity: 1;
}
.ai-rag__node-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    fill: var(--svc-ink);
    letter-spacing: 0.02em;
    pointer-events: none;
}
.ai-rag__node-label--strong {
    font-size: 13px;
    fill: var(--svc-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ai-rag__node-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .ai-rag__node:hover .ai-rag__node-rect {
        stroke-opacity: 1;
        stroke-width: 2;
    }
    .ai-rag__node--strong:hover .ai-rag__node-rect--strong {
        stroke-width: 2.4;
    }
}

.ai-rag__tooltip {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 220px;
    padding: 10px 14px;
    background: var(--svc-bg);
    border: 1px solid color-mix(in srgb, var(--svc-accent) 38%, transparent);
    border-left: 2px solid var(--svc-accent);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--svc-ink);
    box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--svc-accent) 55%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.25s;
    z-index: 3;
}
.ai-rag__tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

@media (max-width: 860px) {
    .ai-rag {
        max-width: 360px;
        margin: 0 auto 8px;
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-rag__line,
    .ai-rag__fade,
    .ai-rag__anchor,
    .ai-rag__measure,
    .ai-rag__node-rect,
    .ai-rag__tooltip {
        transition: none !important;
    }
    .ai-rag__line { stroke-dashoffset: 0; }
    .ai-rag__fade,
    .ai-rag__anchor,
    .ai-rag__measure { opacity: 1; }
}

/* =========================================================
   WEB DEVELOPMENT — BROWSER ARCHITECTURE DIAGRAM
   Self-referential overlay on the Web Development service
   page overview, mirroring the mob-arch construction style.
   ========================================================= */

.webdev-arch {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 540px;
}
.webdev-arch__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--svc-ink-soft);
    position: relative;
    padding-left: 44px;
}
.webdev-arch__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.webdev-arch__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 720 / 480;
}
.webdev-arch__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.webdev-arch__caption {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--svc-ink-soft);
    max-width: 48ch;
    margin: 0;
}

.webdev-arch__line {
    fill: none;
    stroke: var(--svc-accent);
    stroke-width: 1.3;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 0.85s cubic-bezier(0.65, 0.05, 0.25, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.webdev-arch__line--guide {
    stroke: color-mix(in srgb, var(--svc-accent) 22%, transparent);
    stroke-width: 0.6;
}
.webdev-arch.is-in .webdev-arch__line { stroke-dashoffset: 0; }

.webdev-arch__fade {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.webdev-arch.is-in .webdev-arch__fade { opacity: 1; }

.webdev-arch__anchor {
    stroke: color-mix(in srgb, var(--svc-accent) 70%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.webdev-arch.is-in .webdev-arch__anchor { opacity: 1; }

.webdev-arch__measure {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 500;
    fill: color-mix(in srgb, var(--svc-accent) 62%, transparent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--draw-delay, 0ms);
}
.webdev-arch.is-in .webdev-arch__measure { opacity: 1; }

.webdev-arch__textline {
    stroke: color-mix(in srgb, var(--svc-accent) 55%, transparent);
    stroke-width: 1;
    stroke-linecap: round;
    fill: color-mix(in srgb, var(--svc-accent) 55%, transparent);
    vector-effect: non-scaling-stroke;
}
.webdev-arch__dot {
    fill: color-mix(in srgb, var(--svc-accent) 65%, transparent);
}
.webdev-arch__url {
    fill: none;
    stroke: color-mix(in srgb, var(--svc-accent) 55%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.webdev-arch__zone-outline {
    fill: none;
    stroke: var(--svc-accent);
    stroke-width: 1.3;
    stroke-opacity: 0.85;
    transition:
        stroke-opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        stroke-width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    vector-effect: non-scaling-stroke;
}
.webdev-arch__zone-fill {
    fill: var(--svc-accent);
    fill-opacity: 0;
    transition: fill-opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.webdev-arch__zone-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .webdev-arch__zone:hover .webdev-arch__zone-outline {
        stroke-opacity: 1;
        stroke-width: 1.9;
    }
    .webdev-arch__zone:hover .webdev-arch__zone-fill {
        fill-opacity: 0.08;
    }
}

.webdev-arch__tooltip {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 140px;
    padding: 7px 12px;
    background: var(--svc-bg);
    border: 1px solid color-mix(in srgb, var(--svc-accent) 38%, transparent);
    border-left: 2px solid var(--svc-accent);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--svc-ink);
    box-shadow: 0 14px 32px -16px color-mix(in srgb, var(--svc-accent) 55%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.25s;
    z-index: 3;
}
.webdev-arch__tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

@media (max-width: 860px) {
    .webdev-arch {
        max-width: 460px;
        margin: 0 auto 8px;
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webdev-arch__line,
    .webdev-arch__fade,
    .webdev-arch__anchor,
    .webdev-arch__measure,
    .webdev-arch__zone-outline,
    .webdev-arch__zone-fill,
    .webdev-arch__tooltip {
        transition: none !important;
    }
    .webdev-arch__line { stroke-dashoffset: 0; }
    .webdev-arch__fade,
    .webdev-arch__anchor,
    .webdev-arch__measure { opacity: 1; }
}

/* =========================================================
   ABOUT — LOGO MARK
   Native PNG mark in the left column of "The Story" section,
   with a simple fade + lift entrance and a slow drift loop.
   ========================================================= */

.logo-mark {
    margin: 0;
    width: 100%;
    max-width: 460px;
    align-self: center;
    justify-self: center;
}
.logo-mark__img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.logo-mark.is-in .logo-mark__img {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: logoMarkFloat 7s ease-in-out 1.2s infinite;
}

@keyframes logoMarkFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@media (max-width: 860px) {
    .logo-mark {
        max-width: 280px;
        margin: 0 auto 8px;
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-mark__img {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none !important;
    }
}

/* =========================================================
   WHAT'S INCLUDED — progressive disclosure panel
   Expand-on-click pattern shared by all 5 service pages.
   Mirrors the .svc2-faq accordion technique.
   ========================================================= */

.svc2-included__item {
    cursor: pointer;
}
.svc2-included__item:focus-visible {
    outline: 2px solid var(--svc-accent);
    outline-offset: -2px;
    border-radius: 2px;
}

/* Arrow doubles as the expand indicator — rotates 90deg when open */
.svc2-included__arrow svg {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc2-included__item.is-open .svc2-included__arrow {
    opacity: 1;
    transform: translateX(0);
}
.svc2-included__item.is-open .svc2-included__arrow svg {
    transform: rotate(90deg);
}

/* Expanded panel — spans full row, height-animated via JS scrollHeight */
.svc2-included__panel {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc2-included__panel-inner {
    padding: 22px clamp(20px, 3vw, 40px) 30px clamp(64px, 8vw, 88px);
    border-top: 1px solid var(--svc-line);
}
.svc2-included__panel-lead {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--svc-ink-soft);
    margin: 0;
    max-width: 60ch;
}
.svc2-included__panel-heading {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--svc-accent);
    margin: 22px 0 12px;
}
.svc2-included__panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.svc2-included__panel-list li {
    position: relative;
    padding-left: 18px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--svc-ink);
    max-width: 60ch;
}
.svc2-included__panel-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.7em;
    width: 5px;
    height: 1px;
    background: var(--svc-accent);
}

/* Open-state hover suppression: don't slide the title further when already open */
.svc2-included__item.is-open .svc2-included__title {
    transform: translateX(0);
    color: var(--svc-accent);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .svc2-included__panel,
    .svc2-included__arrow svg {
        transition: none !important;
    }
}

@media (max-width: 760px) {
    .svc2-included__panel-inner {
        padding: 18px 4px 26px clamp(56px, 14vw, 68px);
    }
}

/* =========================================================
   BLOG POST TEMPLATE  (.bp-*)
   ========================================================= */
.bp-page { padding: calc(var(--nav-h) + 56px) 0 80px; background: var(--white); }
.bp-page .bp-container { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.bp-back {
    color: var(--red);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 22px;
}
.bp-back:hover { text-decoration: underline; }

.bp-head { margin-bottom: 28px; }
.bp-head .blog-cat { display: inline-block; }
.bp-head h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--black);
    margin: 18px 0 18px;
}
.bp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.85rem;
    color: var(--grey-600);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--grey-200);
}
.bp-meta .bp-author-line { color: var(--ink); font-weight: 600; }
.bp-updated { color: var(--grey-500); }

.bp-hero {
    margin: 28px 0 32px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--grey-100);
}
.bp-hero img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.bp-lead {
    margin: 0 0 32px;
    padding: 22px 24px;
    background: var(--grey-50);
    border-left: 3px solid var(--red);
    border-radius: 6px;
}
.bp-lead p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ink);
    font-weight: 500;
}
.bp-lead strong { color: var(--black); }

.bp-body h2 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--black);
    margin: 40px 0 14px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.bp-body h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--black);
    margin: 28px 0 10px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.bp-body p {
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.75;
    margin: 0 0 18px;
}
.bp-body ul, .bp-body ol {
    margin: 0 0 22px;
    padding-left: 22px;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.7;
}
.bp-body ul li, .bp-body ol li { margin-bottom: 8px; }
.bp-body a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.bp-body a:hover { text-decoration-thickness: 2px; }
.bp-body strong { color: var(--black); font-weight: 700; }
.bp-body blockquote {
    margin: 26px 0;
    padding: 14px 20px;
    border-left: 3px solid var(--grey-300);
    color: var(--grey-700);
    font-style: italic;
}

.bp-faq {
    margin: 48px 0 0;
    padding-top: 36px;
    border-top: 1px solid var(--grey-200);
}
.bp-faq h2 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}
.bp-faq details {
    border-bottom: 1px solid var(--grey-200);
    padding: 16px 0;
}
.bp-faq details:first-of-type { border-top: 1px solid var(--grey-200); }
.bp-faq summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--black);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-right: 4px;
}
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::after {
    content: '+';
    color: var(--red);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: -2px;
    transition: transform 0.25s ease;
}
.bp-faq details[open] summary::after { content: '\2212'; }
.bp-faq__a {
    padding: 14px 0 4px;
    font-size: 0.98rem;
    color: var(--ink);
    line-height: 1.7;
}
.bp-faq__a p { margin: 0 0 12px; }

.bp-cta {
    margin: 48px 0 0;
    padding: 32px;
    background: linear-gradient(135deg, rgba(209, 10, 17, 0.06), var(--grey-50));
    border: 1px solid var(--grey-200);
    border-radius: 16px;
}
.bp-cta h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.bp-cta p {
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.65;
    margin: 0 0 18px;
}
.bp-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--hp-ink, #0e0e10);
    color: var(--white);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.5s ease, box-shadow 0.5s ease, transform 0.25s ease;
    will-change: transform;
}
.bp-cta__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: -1;
}
.bp-cta__btn:hover::before { transform: translateY(0); }
.bp-cta__btn:hover {
    color: var(--white);
    box-shadow: 0 18px 38px -14px rgba(209, 10, 17, 0.55);
}
.bp-cta__btn:active { transform: translateY(1px) scale(0.985); }

.bp-author {
    display: flex;
    gap: 22px;
    align-items: center;
    margin: 48px 0 0;
    padding: 28px;
    background: var(--grey-50);
    border-radius: 12px;
}
a.bp-author {
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
a.bp-author:hover,
a.bp-author:focus-visible {
    background: var(--grey-100);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
a.bp-author:focus-visible {
    outline: 2px solid var(--accent, #D10A11);
    outline-offset: 3px;
}
.bp-author img,
.bp-author picture {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
}
.bp-author img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border: 3px solid var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.bp-author__name {
    font-weight: 700;
    color: var(--black);
    margin: 0 0 6px;
    font-size: 0.95rem;
}
.bp-author__bio {
    font-size: 0.9rem;
    color: var(--grey-700);
    line-height: 1.55;
    margin: 0;
}

.bp-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 0;
    padding: 16px 0;
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    font-size: 0.85rem;
    color: var(--grey-600);
}
.bp-share p { margin: 0; font-weight: 600; color: var(--grey-700); }
.bp-share a, .bp-share button {
    color: var(--ink);
    text-decoration: none;
    background: none;
    border: 1px solid var(--grey-300);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-family: inherit;
}
.bp-share a:hover, .bp-share button:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
}

.bp-related {
    margin: 56px 0 0;
    padding-top: 36px;
    border-top: 1px solid var(--grey-200);
}
.bp-related h2 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 22px;
    letter-spacing: -0.02em;
}
.bp-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.bp-related__card {
    display: block;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.bp-related__card:hover { border-color: var(--ink); transform: translateY(-2px); }
.bp-related__card .blog-cat { font-size: 0.7rem; padding: 4px 10px; }
.bp-related__card h3 {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--black);
    margin: 10px 0 6px;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.bp-related__card p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--grey-600);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .bp-page { padding: calc(var(--nav-h) + 32px) 0 60px; }
    .bp-head h1 { font-size: 1.75rem; }
    .bp-lead { padding: 18px 18px; }
    .bp-lead p { font-size: 1rem; }
    .bp-body h2 { font-size: 1.35rem; }
    .bp-cta { padding: 24px; }
    .bp-author { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; padding: 22px; }
    .bp-author img,
    .bp-author picture { width: 88px; height: 88px; }
}


/* =========================================================
   QUOTE PAGE — refinement overrides (quote-improvements.md)
   ========================================================= */

/* ---- 1. Soften every form field against the cream background ---- */
.qt-field input,
.qt-field textarea,
.qt-field select,
.qt-field--tel .qt-tel {
    background: var(--svc-bg);
    border: 1px solid rgba(10, 10, 10, 0.15);
    box-shadow: none;
    border-radius: 8px;
    transform: none;
    transition:
        border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field:hover input,
.qt-field:hover textarea,
.qt-field:hover select,
.qt-field--tel:hover .qt-tel {
    border-color: rgba(10, 10, 10, 0.28);
    box-shadow: none;
    transform: none;
}
.qt-field input:focus,
.qt-field textarea:focus,
.qt-field select:focus,
.qt-field--tel .qt-tel:focus-within {
    border-color: var(--svc-accent);
    background: var(--svc-bg);
    box-shadow: none;
    transform: none;
}
/* No box-shadow on invalid state either; rely on the red border alone */
.qt-field.is-invalid input,
.qt-field.is-invalid textarea,
.qt-field.is-invalid select {
    box-shadow: none;
}

/* ---- 2 & 3. Select dropdown styling ---- */
.qt-field--select {
    position: relative;
}
.qt-field--select select {
    width: 100%;
    padding: 24px 44px 10px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--svc-ink);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
}
.qt-field--select::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-size: 12px 12px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qt-field--select:hover::after,
.qt-field--select:focus-within::after {
    transform: translateY(1px);
}
/* Select fields always show the label floated at the top — selects can't
   detect placeholder state in pure CSS, and dropdowns benefit from a
   persistent visual label anyway. */
.qt-field--select .qt-field__label {
    transform: translateY(-14px) scale(0.78);
    color: var(--svc-ink-soft);
}
.qt-field--select select:focus ~ .qt-field__label {
    color: var(--svc-accent);
}

/* ---- 4. Required asterisk ---- */
.qt-field__required {
    color: var(--svc-accent);
    font-size: 0.85em;
    font-weight: 700;
    margin-left: 4px;
    line-height: 1;
}

/* ---- 6. Reduce the visual weight of the phone country selector ---- */
/* The unified .qt-tel wrapper owns the border/background — strip them from
   the dial itself so it doesn't sit inside its own border. */
.qt-field--tel .qt-tel__dial,
.qt-field--tel .qt-tel__dial:hover,
.qt-field--tel .qt-tel__dial:focus {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.qt-tel__dial {
    flex: 0 0 auto;
    width: clamp(96px, 18%, 124px);
    padding: 24px 28px 10px 18px;
    font-size: 0.95rem;
    color: var(--svc-ink-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: right 10px center;
}
.qt-tel__divider {
    background: rgba(10, 10, 10, 0.12);
}

/* ---- 7. What happens next — numbered list ---- */
.qt-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.qt-steps__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.qt-steps__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--svc-accent);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    margin-top: 1px;
}
.qt-steps__copy {
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--svc-ink);
}

/* ---- 8. "Elsewhere" block (heading already styled via qt-side__heading) ---- */
.qt-side__elsewhere .qt-side__socials {
    margin-top: 4px;
}

/* ---- 9. Submit button: red variant + breathing room ---- */
.qt-form__submit-row {
    margin-top: 28px;
}
.svc2-cta.svc2-cta--red {
    background: var(--svc-accent);
    color: var(--white);
    padding: 20px 36px;
    font-size: 1.02rem;
    font-weight: 600;
}
.svc2-cta.svc2-cta--red::before {
    background: var(--svc-ink);
}
.svc2-cta.svc2-cta--red:hover {
    color: var(--white);
    box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--svc-ink) 55%, transparent);
}
.svc2-cta.svc2-cta--red.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

/* ---- 10. Mobile sanity ---- */
@media (max-width: 480px) {
    .qt-tel__dial {
        width: clamp(88px, 26%, 110px);
        padding-left: 14px;
        padding-right: 24px;
    }
    .qt-field--select select {
        padding-right: 40px;
    }
    .qt-steps__num { width: 24px; height: 24px; line-height: 24px; }
}


/* =========================================================
   HOMEPAGE — "Why us / Share your idea" section (.hp-pitch)
   ========================================================= */

.hp-pitch {
    position: relative;
    background: var(--hp-bg);
    padding: clamp(80px, 9vw, 130px) 0;
    overflow: hidden;
}

.hp-pitch__main { position: relative; z-index: 1; }

.hp-pitch__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(48px, 7vw, 110px);
    align-items: start;
}

/* ---- LEFT COLUMN: Why us ---- */
.hp-pitch__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(36px, 4vw, 56px);
}
.hp-pitch__head .hp-section-line { margin: 0 0 22px; }
.hp-pitch__head .hp-section-eyebrow { margin-bottom: 18px; }
.hp-pitch__head .hp-section-title { text-align: left; }

.hp-pitch__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 40px);
}
.hp-pitch__point {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    align-items: start;
}
.hp-pitch__num {
    font-family: var(--hp-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--red);
    padding-top: 6px;
    border-top: 1px solid var(--red);
    display: inline-block;
    width: 36px;
}
.hp-pitch__point-title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.6vw, 1.32rem);
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: var(--hp-ink);
    margin: 0 0 8px;
}
.hp-pitch__point-copy {
    font-size: 1rem;
    line-height: 1.62;
    color: var(--hp-ink-soft);
    margin: 0;
    max-width: 46ch;
}

/* ---- RIGHT COLUMN: form panel ---- */
.hp-pitch__panel {
    position: relative;
    background: var(--hp-bg-warm);
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    padding: clamp(28px, 3vw, 40px);
}
.hp-pitch__form-head {
    margin-bottom: clamp(22px, 2.4vw, 30px);
}
.hp-pitch__form-head .hp-section-eyebrow { margin-bottom: 14px; }
.hp-pitch__form-head .hp-section-title { text-align: left; }
.hp-pitch__form-sub {
    margin: 14px 0 0;
    color: var(--hp-ink-soft);
    font-size: 0.96rem;
    line-height: 1.55;
}
.hp-pitch__inline-link {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hp-pitch__inline-link:hover { text-decoration-thickness: 2px; }

/* Form fields (mirrors quote page editorial treatment) */
.hp-pitch__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hp-pitch__field {
    position: relative;
}
.hp-pitch__field input,
.hp-pitch__field textarea {
    width: 100%;
    padding: 24px 18px 10px;
    font-family: var(--font-body, inherit);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--hp-ink);
    background: var(--hp-bg);
    border: 1px solid rgba(10, 10, 10, 0.15);
    border-radius: 8px;
    outline: none;
    appearance: none;
    transition:
        border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__field textarea {
    min-height: 140px;
    resize: vertical;
    padding-top: 28px;
    font-family: inherit;
}
.hp-pitch__field input:hover,
.hp-pitch__field textarea:hover { border-color: rgba(10, 10, 10, 0.28); }
.hp-pitch__field input:focus,
.hp-pitch__field textarea:focus { border-color: var(--red); }
.hp-pitch__field input::placeholder,
.hp-pitch__field textarea::placeholder { color: transparent; }
.hp-pitch__label {
    position: absolute;
    left: 18px;
    top: 20px;
    font-size: 1rem;
    color: var(--hp-ink-soft);
    pointer-events: none;
    transform-origin: left top;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__field--textarea .hp-pitch__label { top: 22px; }
.hp-pitch__field input:focus ~ .hp-pitch__label,
.hp-pitch__field input:not(:placeholder-shown) ~ .hp-pitch__label,
.hp-pitch__field textarea:focus ~ .hp-pitch__label,
.hp-pitch__field textarea:not(:placeholder-shown) ~ .hp-pitch__label {
    transform: translateY(-14px) scale(0.78);
}
.hp-pitch__field input:focus ~ .hp-pitch__label,
.hp-pitch__field textarea:focus ~ .hp-pitch__label { color: var(--red); }
.hp-pitch__required {
    color: var(--red);
    font-size: 0.85em;
    font-weight: 700;
    margin-left: 4px;
}
.hp-pitch__field.is-invalid input,
.hp-pitch__field.is-invalid textarea { border-color: var(--red); }

/* Submit row */
.hp-pitch__submit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 10px;
}
.hp-pitch__submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: var(--red);
    color: var(--white);
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1;
    transition:
        background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__submit:hover {
    background: #B30910;
    box-shadow: 0 14px 32px -14px rgba(209, 10, 17, 0.55);
    transform: translateY(-1px);
}
.hp-pitch__submit svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.hp-pitch__submit:hover svg { transform: translateX(3px); }
.hp-pitch__submit.is-loading { opacity: 0.7; pointer-events: none; }
.hp-pitch__note {
    margin: 0;
    font-size: 0.86rem;
    color: var(--hp-ink-soft);
}
.hp-pitch__error {
    margin: 8px 0 0;
    color: var(--red);
    font-size: 0.92rem;
}
.hp-pitch__error a { color: var(--red); text-decoration: underline; }

/* Form leaving state (triggered by JS pre-success) */
.hp-pitch__main {
    transform-origin: 50% 50%;
    transition:
        opacity 0.2s ease-in,
        transform 0.2s ease-in,
        filter 0.2s ease-in;
}
.hp-pitch.is-success-active .hp-pitch__main {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(2px);
    pointer-events: none;
}

/* ---- SUCCESS STATE — full-section red takeover ---- */
.hp-pitch__success {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hp-pitch__success[hidden] { display: none; }
.hp-pitch.is-success-active .hp-pitch__success { pointer-events: auto; }

/* Red sweep background — clip-path reveal from the left */
.hp-pitch__success-sweep {
    position: absolute;
    inset: 0;
    background: var(--red);
    clip-path: inset(0 100% 0 0);
}
.hp-pitch.is-success-active .hp-pitch__success-sweep {
    animation: hpPitchSweepIn 400ms cubic-bezier(0.55, 0, 0.2, 1) 200ms forwards;
}
@keyframes hpPitchSweepIn {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Top-right "× Send another" */
.hp-pitch__success-dismiss {
    position: absolute;
    top: clamp(18px, 2.4vw, 28px);
    right: clamp(20px, 3vw, 36px);
    background: transparent;
    border: 0;
    color: rgba(250, 248, 244, 0.62);
    font-family: inherit;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    padding: 6px 4px;
    opacity: 0;
    transition: color 0.2s ease-out, opacity 0.2s ease-out;
}
.hp-pitch__success-dismiss span { font-size: 1.05em; margin-right: 4px; }
.hp-pitch__success-dismiss:hover { color: var(--hp-bg); }
.hp-pitch.is-success-active .hp-pitch__success-dismiss {
    animation: hpPitchFadeIn 200ms ease-out 1800ms forwards;
}

/* Centred inner content */
.hp-pitch__success-inner {
    margin: auto;
    padding: clamp(72px, 8vw, 110px) 24px;
    text-align: center;
    max-width: 760px;
    width: 100%;
    color: var(--hp-bg);
    position: relative;
    z-index: 1;
}
.hp-pitch__success-title {
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0 0 22px;
    opacity: 0;
    transform: translateY(12px);
    outline: none;
}
.hp-pitch.is-success-active .hp-pitch__success-title {
    animation: hpPitchRise 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 750ms forwards;
}
.hp-pitch__success-sub {
    font-family: var(--hp-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.45;
    margin: 0 0 14px;
    opacity: 0;
}
.hp-pitch.is-success-active .hp-pitch__success-sub {
    animation: hpPitchFadeIn 200ms ease-out 950ms forwards;
}
.hp-pitch__success-muted {
    font-family: var(--hp-display);
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.55;
    margin: 0 0 36px;
    color: rgba(250, 248, 244, 0.7);
    opacity: 0;
}
.hp-pitch.is-success-active .hp-pitch__success-muted {
    animation: hpPitchFadeIn 150ms ease-out 1100ms forwards;
}
.hp-pitch__success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 26px;
}
.hp-pitch__success-btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--hp-bg);
    color: var(--red);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.95);
    transition:
        background-color 0.2s ease-out,
        color 0.2s ease-out,
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out;
}
.hp-pitch__success-btn svg { transition: transform 0.3s ease-out; }
.hp-pitch__success-btn:hover {
    background: var(--red);
    color: var(--hp-bg);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
}
.hp-pitch__success-btn:hover svg { transform: translateX(3px); }
.hp-pitch.is-success-active .hp-pitch__success-btn:nth-of-type(1) {
    animation: hpPitchPopIn 250ms cubic-bezier(0.2, 0.8, 0.2, 1) 1300ms forwards;
}
.hp-pitch.is-success-active .hp-pitch__success-btn:nth-of-type(2) {
    animation: hpPitchPopIn 250ms cubic-bezier(0.2, 0.8, 0.2, 1) 1450ms forwards;
}
.hp-pitch__success-scroll {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(250, 248, 244, 0.68);
    opacity: 0;
}
.hp-pitch__success-scroll a {
    color: rgba(250, 248, 244, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hp-pitch__success-scroll a:hover { color: var(--hp-bg); }
.hp-pitch.is-success-active .hp-pitch__success-scroll {
    animation: hpPitchFadeIn 200ms ease-out 1700ms forwards;
}

/* Reverse / dismiss state */
.hp-pitch.is-success-leaving .hp-pitch__success-inner,
.hp-pitch.is-success-leaving .hp-pitch__success-dismiss {
    opacity: 0;
    transition: opacity 0.2s ease-in;
    animation: none;
}
.hp-pitch.is-success-leaving .hp-pitch__success-sweep {
    animation: hpPitchSweepOut 400ms cubic-bezier(0.55, 0, 0.2, 1) 200ms forwards;
}
@keyframes hpPitchSweepOut {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 100% 0 0); }
}

@keyframes hpPitchFadeIn { to { opacity: 1; } }
@keyframes hpPitchRise   { to { opacity: 1; transform: translateY(0); } }
@keyframes hpPitchPopIn  { to { opacity: 1; transform: scale(1); } }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .hp-pitch__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .hp-pitch__success-actions { flex-direction: column; align-items: stretch; }
    .hp-pitch__success-btn { justify-content: center; }
    .hp-pitch__success-title { font-size: clamp(2.2rem, 11vw, 3.6rem); }
}
@media (max-width: 480px) {
    .hp-pitch__panel { padding: 24px 20px; }
    .hp-pitch__point { grid-template-columns: 38px 1fr; gap: 14px; }
    .hp-pitch__submit { width: 100%; justify-content: center; }
    .hp-pitch__success-dismiss { font-size: 0.82rem; top: 14px; right: 16px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hp-pitch__main,
    .hp-pitch__success-sweep,
    .hp-pitch__success-title,
    .hp-pitch__success-sub,
    .hp-pitch__success-muted,
    .hp-pitch__success-btn,
    .hp-pitch__success-scroll,
    .hp-pitch__success-dismiss {
        animation: none !important;
        transition: none !important;
    }
    .hp-pitch.is-success-active .hp-pitch__main { display: none; }
    .hp-pitch.is-success-active .hp-pitch__success-sweep { clip-path: inset(0 0 0 0); }
    .hp-pitch.is-success-active .hp-pitch__success-title,
    .hp-pitch.is-success-active .hp-pitch__success-sub,
    .hp-pitch.is-success-active .hp-pitch__success-muted,
    .hp-pitch.is-success-active .hp-pitch__success-btn,
    .hp-pitch.is-success-active .hp-pitch__success-scroll,
    .hp-pitch.is-success-active .hp-pitch__success-dismiss {
        opacity: 1;
        transform: none;
    }
}


/* =========================================================
   HOMEPAGE — Founder mini-card (inside .hp-pitch left column)
   ========================================================= */
.hp-pitch__founder {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(18px, 2vw, 26px);
    margin: clamp(40px, 4.5vw, 60px) 0 0;
    padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
    background: linear-gradient(180deg, var(--hp-bg-warm) 0%, var(--hp-bg) 100%);
    border: 1px solid var(--hp-line);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition:
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__founder::before {
    /* subtle red accent that slides in from the left on hover */
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}
.hp-pitch__founder:hover {
    border-color: rgba(209, 10, 17, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -22px rgba(10, 10, 10, 0.25);
}
.hp-pitch__founder:hover::before { transform: scaleY(1); }

/* ---- Photo + animated rings ---- */
.hp-pitch__founder-photo {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: block;
}
.hp-pitch__founder-photo img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid var(--hp-bg);
    box-shadow: 0 6px 18px -8px rgba(10, 10, 10, 0.25);
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__founder:hover .hp-pitch__founder-photo img { transform: scale(1.05); }

/* Two concentric rings around the photo — slow rotation + breathing */
.hp-pitch__founder-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--red);
    pointer-events: none;
}
.hp-pitch__founder-ring--a {
    inset: -8px;
    border-style: dashed;
    opacity: 0.55;
    animation: hpFounderSpin 18s linear infinite;
}
.hp-pitch__founder-ring--b {
    inset: -14px;
    opacity: 0.18;
    animation: hpFounderBreathe 4.2s ease-in-out infinite;
}
.hp-pitch__founder-dot {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 3px var(--hp-bg-warm);
    z-index: 3;
    animation: hpFounderPulse 3s ease-in-out infinite;
}

@keyframes hpFounderSpin {
    to { transform: rotate(360deg); }
}
@keyframes hpFounderBreathe {
    0%, 100% { transform: scale(1); opacity: 0.18; }
    50%      { transform: scale(1.06); opacity: 0.32; }
}
@keyframes hpFounderPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* ---- Text ---- */
.hp-pitch__founder-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.hp-pitch__founder-eyebrow {
    font-family: var(--font-body, inherit);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--red);
    line-height: 1;
}
.hp-pitch__founder-name {
    font-family: var(--hp-display);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -0.015em;
    color: var(--hp-ink);
    line-height: 1.15;
}
.hp-pitch__founder-quote {
    margin-top: 4px;
    font-family: var(--hp-display);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--hp-ink-soft);
    max-width: 38ch;
}

/* ---- Arrow on the right ---- */
.hp-pitch__founder-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--hp-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-ink-soft);
    flex-shrink: 0;
    transition:
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__founder:hover .hp-pitch__founder-arrow {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateX(3px);
}

@media (max-width: 540px) {
    .hp-pitch__founder {
        grid-template-columns: auto 1fr;
        gap: 16px;
    }
    .hp-pitch__founder-arrow { display: none; }
    .hp-pitch__founder-quote { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-pitch__founder,
    .hp-pitch__founder::before,
    .hp-pitch__founder-photo img,
    .hp-pitch__founder-ring,
    .hp-pitch__founder-dot,
    .hp-pitch__founder-arrow {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   HOMEPAGE — "Read more" anchor button (jumps to #why)
   ========================================================= */
.hp-pitch__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    margin: clamp(28px, 3vw, 36px) 0 0;
    background: var(--hp-bg);
    color: var(--hp-ink);
    border: 1px solid rgba(10, 10, 10, 0.15);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--hp-display);
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1;
    align-self: flex-start;
    width: fit-content;
    transition:
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__more:hover {
    background: var(--red);
    color: var(--white);
    border-color: var(--red);
    transform: translateY(-1px);
}
.hp-pitch__more:hover .hp-pitch__more-arrow {
    transform: translateY(4px);
}
@media (prefers-reduced-motion: reduce) {
    .hp-pitch__more,
    .hp-pitch__more-arrow {
        transition: none !important;
    }
}


/* =========================================================
   HOMEPAGE PITCH — match the .hp-btn red-sweep-up animation
   on the "Read more" and "Send message" buttons.
   ========================================================= */

/* ---- Read more pill: cream base, red sweeps up from below ---- */
.hp-pitch__more {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    will-change: transform;
    transition:
        transform 0.5s var(--ease),
        border-color 0.5s var(--ease),
        color 0.5s var(--ease),
        box-shadow 0.5s var(--ease);
}
.hp-pitch__more::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: 1;
}
.hp-pitch__more-label,
.hp-pitch__more-arrow {
    position: relative;
    z-index: 2;
}
/* Override the earlier hover rule so the colour change syncs with the sweep */
.hp-pitch__more:hover {
    background: var(--hp-bg);
    color: var(--white);
    border-color: var(--red);
    box-shadow: 0 22px 46px -16px rgba(209, 10, 17, 0.5);
    transform: translateY(-1px);
}
.hp-pitch__more:hover::before { transform: translateY(0); }
/* Keep the existing downward-chevron flourish on hover */
.hp-pitch__more:hover .hp-pitch__more-arrow { transform: translateY(4px); }
.hp-pitch__more:active { transform: translateY(0) scale(0.985); }

/* ---- Send message button: switch base to ink so the red can sweep up ---- */
.hp-pitch__submit {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-ink);
    color: var(--white);
    will-change: transform;
    transition:
        transform 0.5s var(--ease),
        background-color 0.5s var(--ease),
        color 0.5s var(--ease),
        box-shadow 0.5s var(--ease);
}
.hp-pitch__submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: 1;
}
.hp-pitch__submit:hover::before { transform: translateY(0); }
.hp-pitch__submit:hover {
    background: var(--hp-ink);
    color: var(--white);
    box-shadow: 0 22px 46px -14px rgba(209, 10, 17, 0.55);
    transform: translateY(-1px);
}
.hp-pitch__submit:active { transform: translateY(1px) scale(0.985); }
.hp-pitch__submit-label,
.hp-pitch__submit svg {
    position: relative;
    z-index: 2;
}
.hp-pitch__submit-label { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp-pitch__submit svg     { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp-pitch__submit:hover .hp-pitch__submit-label { transform: translateX(-2px); }
.hp-pitch__submit:hover svg                     { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
    .hp-pitch__more,
    .hp-pitch__more::before,
    .hp-pitch__more-arrow,
    .hp-pitch__submit,
    .hp-pitch__submit::before,
    .hp-pitch__submit-label,
    .hp-pitch__submit svg {
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   HOMEPAGE PITCH — refined success-state choreography
   (overrides the earlier hp-pitch__success animation timings)
   ========================================================= */

/* ---- 1. Red sweep: 500ms with confident ease-out ---- */
.hp-pitch.is-success-active .hp-pitch__success-sweep {
    animation: hpPitchSweepIn 500ms cubic-bezier(0.55, 0, 0.2, 1) 200ms forwards;
}

/* ---- 2. Title is no longer animated as one block — disable old keyframe,
         use per-word + full-stop reveals instead ---- */
.hp-pitch__success-title {
    /* keep initial typography & focus-visible state, but ensure the heading
       container itself stays opaque so its child spans control the reveal */
    opacity: 1;
    transform: none;
    animation: none;
}
.hp-pitch.is-success-active .hp-pitch__success-title {
    animation: none;
    opacity: 1;
    transform: none;
}

.hp-pitch__success-word,
.hp-pitch__success-stop {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity;
}
.hp-pitch__success-word {
    transform: translateY(16px);
}
.hp-pitch__success-stop {
    color: var(--red);
    margin-left: 0.08em;
    transform: scale(0.8);
    transform-origin: 50% 70%;
}

.hp-pitch.is-success-active .hp-pitch__success-word:nth-of-type(1) {
    animation: hpPitchWordRise 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 900ms forwards;
}
.hp-pitch.is-success-active .hp-pitch__success-word:nth-of-type(2) {
    animation: hpPitchWordRise 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 1050ms forwards;
}
.hp-pitch.is-success-active .hp-pitch__success-stop {
    animation: hpPitchStopPop 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 1150ms forwards;
}

@keyframes hpPitchWordRise {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hpPitchStopPop {
    to { opacity: 1; transform: scale(1); }
}

/* ---- 3. Sub-headline: small 8px rise, slower 300ms, later start ---- */
.hp-pitch__success-sub {
    opacity: 0;
    transform: translateY(8px);
}
.hp-pitch.is-success-active .hp-pitch__success-sub {
    animation: hpPitchSubRise 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 1500ms forwards;
}
@keyframes hpPitchSubRise {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- 4. Conversational sub-line: fade only, 200ms ---- */
.hp-pitch__success-muted {
    opacity: 0;
}
.hp-pitch.is-success-active .hp-pitch__success-muted {
    animation: hpPitchFadeIn 200ms ease-out 1750ms forwards;
}

/* ---- 5. Buttons: scale from 0.96, 250ms ---- */
.hp-pitch__success-btn {
    opacity: 0;
    transform: scale(0.96);
}
.hp-pitch.is-success-active .hp-pitch__success-btn:nth-of-type(1) {
    animation: hpPitchPopIn 250ms cubic-bezier(0.2, 0.8, 0.2, 1) 1950ms forwards;
}
.hp-pitch.is-success-active .hp-pitch__success-btn:nth-of-type(2) {
    animation: hpPitchPopIn 250ms cubic-bezier(0.2, 0.8, 0.2, 1) 2100ms forwards;
}

/* ---- 6. Keep scrolling + × Send another ---- */
.hp-pitch.is-success-active .hp-pitch__success-scroll {
    animation: hpPitchFadeIn 200ms ease-out 2350ms forwards;
}
.hp-pitch.is-success-active .hp-pitch__success-dismiss {
    animation: hpPitchFadeIn 200ms ease-out 2500ms forwards;
}

/* ---- 7. Reverse leave choreography: kill all word/stop animations so the
         entire inner fades together via the existing rule ---- */
.hp-pitch.is-success-leaving .hp-pitch__success-word,
.hp-pitch.is-success-leaving .hp-pitch__success-stop,
.hp-pitch.is-success-leaving .hp-pitch__success-sub,
.hp-pitch.is-success-leaving .hp-pitch__success-muted,
.hp-pitch.is-success-leaving .hp-pitch__success-btn,
.hp-pitch.is-success-leaving .hp-pitch__success-scroll {
    animation: none;
}

/* ---- 8. Reduced motion: instant reveal, under 150ms total ---- */
@media (prefers-reduced-motion: reduce) {
    .hp-pitch.is-success-active .hp-pitch__success-word,
    .hp-pitch.is-success-active .hp-pitch__success-stop,
    .hp-pitch.is-success-active .hp-pitch__success-sub,
    .hp-pitch.is-success-active .hp-pitch__success-muted,
    .hp-pitch.is-success-active .hp-pitch__success-btn,
    .hp-pitch.is-success-active .hp-pitch__success-scroll,
    .hp-pitch.is-success-active .hp-pitch__success-dismiss {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .hp-pitch.is-success-active .hp-pitch__success-sweep {
        animation: none !important;
        clip-path: inset(0 0 0 0) !important;
    }
    .hp-pitch.is-success-active .hp-pitch__main {
        transition: none !important;
        display: none;
    }
}


/* =========================================================
   HOMEPAGE PITCH — success-state buttons get the same
   red-sweep-up hover as the rest of the homepage CTAs
   ========================================================= */
.hp-pitch__success-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__success-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    transform: translateY(101%);
    transition: transform 0.55s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: 0;
}
.hp-pitch__success-btn:hover::before { transform: translateY(0); }
/* Bring the text + arrow above the sweeping red layer */
.hp-pitch__success-btn > span,
.hp-pitch__success-btn > svg {
    position: relative;
    z-index: 1;
}
/* Override the older flat hover swap so the cream base stays, the sweep
   does the work, and the label fades from red to cream over the red. */
.hp-pitch__success-btn:hover {
    background: var(--hp-bg);
    color: var(--hp-bg);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 22px 46px -16px rgba(0, 0, 0, 0.28);
}
.hp-pitch__success-btn:hover > svg { transform: translateX(4px); }
.hp-pitch__success-btn:active { transform: translateY(0) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
    .hp-pitch__success-btn,
    .hp-pitch__success-btn::before,
    .hp-pitch__success-btn > svg {
        transition: none !important;
    }
}


/* =========================================================
   HOMEPAGE PITCH — "Or reach us directly" contacts block
   (inside .hp-pitch__panel, below the form)
   ========================================================= */
.hp-pitch__contacts {
    margin-top: clamp(22px, 2.6vw, 30px);
    padding-top: clamp(18px, 2vw, 24px);
    border-top: 1px solid var(--hp-line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hp-pitch__contacts-eyebrow {
    font-family: var(--font-body, inherit);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
}
.hp-pitch__contacts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hp-pitch__contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--hp-ink);
    text-decoration: none;
    font-size: 0.98rem;
    line-height: 1.4;
    padding: 4px 0;
    transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__contact svg {
    width: 18px;
    height: 18px;
    color: var(--hp-ink-soft);
    flex-shrink: 0;
    transition:
        color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__contact span {
    position: relative;
    display: inline-block;
}
.hp-pitch__contact span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__contact:hover {
    color: var(--red);
}
.hp-pitch__contact:hover svg {
    color: var(--red);
    transform: translateX(2px);
}
.hp-pitch__contact:hover span::after {
    transform: scaleX(1);
}

.hp-pitch__socials {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.hp-pitch__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hp-line);
    color: var(--hp-ink-soft);
    text-decoration: none;
    transition:
        background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__socials a svg {
    width: 16px;
    height: 16px;
    display: block;
}
.hp-pitch__socials a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .hp-pitch__contact,
    .hp-pitch__contact svg,
    .hp-pitch__contact span::after,
    .hp-pitch__socials a {
        transition: none !important;
    }
}


/* =========================================================
   HOMEPAGE PITCH — fourth (locale) row in the Why us list
   ========================================================= */
/* Pin column mirrors the .hp-pitch__num column (same width,
   same top red rule, same vertical rhythm) — only the glyph
   changes, signalling this row as a different category. */
.hp-pitch__pin {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 36px;
    padding-top: 6px;
    border-top: 1px solid var(--red);
    color: var(--red);
}
.hp-pitch__pin svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Red full stop on the locale-row headline (other point titles keep their
   black stops — this row's red stop intentionally marks it as different). */
.hp-pitch__point--locale .hp-pitch__point-stop {
    color: var(--red);
}

/* Mobile tightening matches the existing 480px override on .hp-pitch__point */
@media (max-width: 480px) {
    .hp-pitch__pin { width: 28px; }
    .hp-pitch__pin svg { width: 16px; height: 16px; }
}


/* =========================================================
   HOMEPAGE PITCH — gorgeous hover treatment on the form card
   ========================================================= */
.hp-pitch__panel {
    /* Ensure the existing position:relative + border are kept; just add
       motion + a couple of editorial accents via pseudos. */
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Red ribbon along the top edge — scales in from the left on hover */
.hp-pitch__panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: var(--red);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.65s cubic-bezier(0.6, 0.04, 0.3, 1);
    z-index: 2;
    pointer-events: none;
}

/* Editorial top-right corner bracket — fades in + settles into place */
.hp-pitch__panel::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 18px;
    width: 16px;
    height: 16px;
    border-top: 1.5px solid var(--red);
    border-right: 1.5px solid var(--red);
    border-top-right-radius: 4px;
    opacity: 0;
    transform: translate(6px, -6px);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
    pointer-events: none;
    z-index: 2;
}

.hp-pitch__panel:hover {
    transform: translateY(-4px);
    border-color: rgba(209, 10, 17, 0.32);
    box-shadow:
        0 30px 60px -28px rgba(10, 10, 10, 0.22),
        0 10px 28px -12px rgba(209, 10, 17, 0.16);
}
.hp-pitch__panel:hover::before { transform: scaleX(1); }
.hp-pitch__panel:hover::after  { opacity: 1; transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
    .hp-pitch__panel,
    .hp-pitch__panel::before,
    .hp-pitch__panel::after {
        transition: none !important;
    }
}

/* Pointer-only: don't trigger any of this on touch devices, where the
   hover would feel sticky and the lift would conflict with form taps. */
@media (hover: none) {
    .hp-pitch__panel:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--hp-line);
    }
    .hp-pitch__panel:hover::before,
    .hp-pitch__panel:hover::after {
        transform: none;
        opacity: 0;
    }
}


/* =========================================================
   HOMEPAGE PITCH — looser breathing in the form-panel header
   ========================================================= */
.hp-pitch__form-head {
    /* More space between header block and the form fields below */
    margin-bottom: clamp(32px, 3.4vw, 44px);
}
.hp-pitch__form-head .hp-section-eyebrow {
    /* Gap between eyebrow and the headline */
    margin-bottom: clamp(20px, 1.8vw, 26px);
}
.hp-pitch__form-head .hp-section-title {
    /* Slightly looser line-height for the multi-line headline */
    line-height: 1.12;
}
.hp-pitch__form-sub {
    /* Gap between the headline and the sub-text */
    margin-top: clamp(20px, 2vw, 26px);
    line-height: 1.6;
}


/* =========================================================
   HOMEPAGE PITCH — cleaner founder photo (rings/dot removed)
   ========================================================= */
.hp-pitch__founder-photo {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    display: block;
    position: relative;
}
.hp-pitch__founder-photo img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid var(--hp-bg);
    box-shadow: 0 10px 28px -10px rgba(10, 10, 10, 0.22);
    display: block;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-pitch__founder:hover .hp-pitch__founder-photo img {
    transform: scale(1.04);
    box-shadow: 0 18px 38px -12px rgba(10, 10, 10, 0.28);
}

/* Neutralise the old rotating/breathing ring + pulsing dot rules so they
   don't render even if anything references them. */
.hp-pitch__founder-ring,
.hp-pitch__founder-ring--a,
.hp-pitch__founder-ring--b,
.hp-pitch__founder-dot {
    display: none !important;
    animation: none !important;
}

@media (max-width: 540px) {
    .hp-pitch__founder-photo,
    .hp-pitch__founder-photo img {
        width: 88px;
        height: 88px;
    }
}