/* =============================================================================
   redesign-pages.css — the homepage redesign carried to blog.html and
   projects.html

   Both detail pages share one layout (breadcrumb, hero image, title column,
   sticky info card, "similar" grid) and one set of class names, so one sheet
   serves both. It is linked after each page's inline <style> and after
   css/enhancements.css, so at equal specificity it wins.

   A pure restyle: no markup, copy or behaviour changes. Delete the <link> and
   each page is exactly what it was.

   The language is the same as css/redesign.css and css/redesign-mobile.css:
   grain over the ink, green eyebrow labels, Righteous display type, pill
   buttons, soft gradient card surfaces, an inset "mat" around images, the
   rotating gradient border, and the oversized "Let's create." sign-off in
   the footer.

   Unlike the homepage, these pages have no separate phone stylesheet, so
   this file styles every width and closes with the phone adjustments.

   01 Tokens + atmosphere      06 Project tools + gallery
   02 Breadcrumb + hero        07 Article body (blog)
   03 Title column             08 Similar section
   04 Info card                09 Footer + floating CTA
   05 Buttons                  10 Tablet + phone
   ============================================================================= */

@property --rd-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* -----------------------------------------------------------------
   01 · Tokens + atmosphere
   ----------------------------------------------------------------- */
:root {
    --rp-green: #28e98c;
    --rp-violet: #5b6af0;
    --rp-ink: #0a0b0b;
    --rp-surface: rgba(255, 255, 255, 0.035);
    --rp-line: rgba(255, 255, 255, 0.08);
    --rp-line-2: rgba(255, 255, 255, 0.15);
    --rp-muted: rgba(255, 255, 255, 0.62);
    --rp-label: rgba(255, 255, 255, 0.45);
    --rp-radius: 22px;
    --rp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body { background-color: var(--rp-ink); }

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--rp-green); color: #0a0a0a; }

/* Blueprint dot grid behind the top of the page, fading out downwards. */
.project.section-padding { position: relative; }
.project.section-padding::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 900px;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 5%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 5%, transparent 70%);
}
.project.section-padding > .container { position: relative; z-index: 1; }


/* -----------------------------------------------------------------
   02 · Breadcrumb + hero image
   ----------------------------------------------------------------- */
/* One line at every width: a long article title is trimmed with an ellipsis
   rather than wrapping the pill onto two lines. */
.proj-breadcrumb {
    display: inline-flex;
    flex-wrap: nowrap;
    max-width: 100%;
    padding: 8px 16px;
    border: 1px solid var(--rp-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12.5px;
    color: var(--rp-label);
}
.proj-breadcrumb a { color: var(--rp-muted); flex-shrink: 0; }
.proj-breadcrumb i { color: rgba(40, 233, 140, 0.7); flex-shrink: 0; }
.proj-breadcrumb span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

/* The cover sits in a framed mat, the same inset the homepage cards use. */
.proj-hero-wrap {
    padding: 10px;
    border: 1px solid var(--rp-line);
    border-radius: 28px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 60%);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.proj-hero-wrap img,
.proj-hero-wrap__inner { border-radius: 19px; }
.proj-hero-wrap__inner { overflow: hidden; }
/* On the blog page the overlay is a direct child of the mat, so it is pulled
   in to cover the image only, not the frame around it. */
.proj-hero-wrap > .proj-hero-overlay { inset: 10px; border-radius: 19px; }
.proj-hero-wrap__inner .proj-hero-overlay { border-radius: 19px; }


/* -----------------------------------------------------------------
   03 · Title column
   ----------------------------------------------------------------- */
.proj-tags { gap: 8px; }
.proj-tag {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(40, 233, 140, 0.08);
    border: 1px solid rgba(40, 233, 140, 0.22);
    color: var(--rp-green);
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
}

#blog-title,
#work-title {
    font-family: 'Righteous', sans-serif;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
#blog-description,
#work-description {
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.76) !important;
}
#blog-sub-description,
#work-sub-description {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: var(--rp-muted) !important;
}


/* -----------------------------------------------------------------
   04 · Info card — the rotating gradient border from the contact form
   ----------------------------------------------------------------- */
.proj-info-card {
    border: 1px solid transparent;
    border-radius: 26px;
    background:
        linear-gradient(165deg, #141716, #0e100f 60%) padding-box,
        conic-gradient(from var(--rd-ang), rgba(40, 233, 140, 0.75), rgba(91, 106, 240, 0.45), rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.06) 65%, rgba(40, 233, 140, 0.75)) border-box;
    box-shadow: 0 40px 100px -40px rgba(40, 233, 140, 0.22), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
    animation: rpSpin 10s linear infinite;
}
@keyframes rpSpin { to { --rd-ang: 360deg; } }
/* The moving border replaces the sliding green bar along the top. */
.proj-info-card__bar { display: none; }

.proj-info-card__head { padding: 26px 26px 20px; border-bottom-color: var(--rp-line); }
.proj-info-card__avatar {
    width: 48px; height: 48px;
    border-radius: 15px;
    background: rgba(40, 233, 140, 0.08);
    border-color: rgba(40, 233, 140, 0.25);
}
.proj-info-card__head-label,
.proj-info-row__label {
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--rp-label);          /* was #444/#555 — too faint to read */
}
.proj-info-card__head-title { font-size: 15.5px; line-height: 1.4; }

.proj-info-row { padding: 16px 26px; }
.proj-info-row + .proj-info-row { border-top-color: var(--rp-line); }
.proj-info-row__icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(40, 233, 140, 0.06);
    border-color: rgba(40, 233, 140, 0.18);
}
.proj-info-row__value { color: rgba(255, 255, 255, 0.85); }
.proj-info-card__cta { padding: 18px 26px 26px; border-top-color: var(--rp-line); }


/* -----------------------------------------------------------------
   05 · Buttons — pills, the primary ones glow
   ----------------------------------------------------------------- */
.proj-info-cta-btn,
.blog-read-cta {
    padding: 16px 20px;
    border-radius: 999px;
    background: var(--rp-green);
    color: #0a0a0a;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 10px 34px -10px rgba(40, 233, 140, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.proj-info-cta-btn::after,
.blog-read-cta::after {
    content: '→';
    display: inline-block;
    transition: transform 0.35s var(--rp-ease);
}
@media (hover: hover) and (pointer: fine) {
    .proj-info-cta-btn:hover,
    .blog-read-cta:hover {
        background: #4ff0a5;
        box-shadow: 0 16px 44px -10px rgba(40, 233, 140, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }
    .proj-info-cta-btn:hover::after,
    .blog-read-cta:hover::after { transform: translateX(5px); }
}

.proj-nav-btn {
    padding: 12px 22px;
    border-color: var(--rp-line-2);
    background: rgba(255, 255, 255, 0.03);
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 11.5px;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.8);
}
@media (hover: hover) and (pointer: fine) {
    .proj-nav-btn:hover { box-shadow: 0 10px 28px -10px rgba(40, 233, 140, 0.7); }
}


/* -----------------------------------------------------------------
   06 · Project tools + gallery
   ----------------------------------------------------------------- */
.tools-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--rp-green);
}
.tools-label::after {
    content: '';
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(40, 233, 140, 0.6), transparent);
}
.tool-chip {
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--rp-line);
    color: rgba(255, 255, 255, 0.8);
}

.masonry-gallery { column-gap: 18px; }
.masonry-gallery .img {
    margin-bottom: 18px;
    border-radius: 18px;
    border: 1px solid var(--rp-line);
    background: #121414;
}
.masonry-gallery .img .img-skeleton { border-radius: 18px; }

.gallery-pending {
    border-radius: var(--rp-radius);
    border-color: var(--rp-line-2);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 60%);
}
.gallery-pending__icon { border-radius: 18px; }
.gallery-pending__title { font-family: 'Righteous', sans-serif; font-size: 24px; font-weight: 400; }
.gallery-pending__text { color: var(--rp-muted); }


/* -----------------------------------------------------------------
   07 · Article body (blog)
   ----------------------------------------------------------------- */
#blog-full-content {
    font-size: 16.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
}
#blog-full-content p { margin-bottom: 18px; }
#blog-full-content .title h5 {
    position: relative;
    margin-top: 44px;
    padding-left: 18px;
    font-family: 'Righteous', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}
/* A short green bar marks each section heading of an article. */
#blog-full-content .title h5::before {
    content: '';
    position: absolute;
    left: 0; top: 0.18em; bottom: 0.18em;
    width: 4px;
    border-radius: 4px;
    background: var(--rp-green);
}
#blog-full-content h6 { font-size: 18px; color: #fff; margin-top: 26px; }
#blog-full-content .unorder-list li,
#blog-full-content .order-list li { opacity: 1; color: rgba(255, 255, 255, 0.72); }
#blog-full-content .iner-img,
#blog-full-content .main-img {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--rp-line);
}
#blog-full-content .post-qoute {
    border: 1px solid var(--rp-line);
    border-left: 3px solid var(--rp-green);
    border-radius: 0 var(--rp-radius) var(--rp-radius) 0;
    background: rgba(40, 233, 140, 0.04);
}
#blog-full-content a { color: var(--rp-green); }

/* Tags + share — one card at the foot of every article. The labels sit on
   their own line above their chips, so "Tags :" can no longer be squeezed
   into a narrow column beside them (what broke it on phones). */
#blog-full-content .info-area {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px 32px;
    margin-top: 40px !important;
    padding: 24px 26px !important;
    border: 1px solid var(--rp-line) !important;
    border-radius: var(--rp-radius);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 60%);
}
#blog-full-content .info-area > .ml-auto { margin-left: 0 !important; }
#blog-full-content .info-area .tags,
#blog-full-content .info-area .share-icon {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#blog-full-content .info-area .valign span {
    display: block;
    margin: 0;
    opacity: 1;
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rp-green);
}
#blog-full-content .info-area .tags > div:last-child,
#blog-full-content .info-area .share-icon > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#blog-full-content .info-area .tags a {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--rp-line);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    line-height: 1.2;
    text-decoration: none;
    cursor: default;
}
#blog-full-content .info-area .tags a::before { content: '#'; margin-right: 2px; color: var(--rp-green); }
#blog-full-content .info-area .share-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--rp-line-2);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
    #blog-full-content .info-area .share-icon a:hover { background: var(--rp-green); border-color: var(--rp-green); color: #0a0a0a; }
}

/* Author card */
#blog-full-content .author-area {
    padding: 28px 30px;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012) 60%);
}
#blog-full-content .author-area .author-img .img {
    width: 84px; height: 84px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--rp-ink), 0 0 0 3px rgba(40, 233, 140, 0.55);
}
#blog-full-content .author-area h6 { margin-top: 0; font-size: 20px; }
#blog-full-content .author-area p { margin: 0; color: var(--rp-muted); font-size: 15px; line-height: 1.75; }


/* -----------------------------------------------------------------
   07b · Theme buttons (.butn) — privacy "Back to Home", 404 links
   The same pills as the homepage: glass outline, and a glowing green
   primary with an arrow.
   ----------------------------------------------------------------- */
.butn.radius-5 { border-radius: 999px !important; }
.butn.butn-md { padding: 16px 30px; }
.butn.butn-bord {
    border-color: var(--rp-line-2);
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.project .col-lg-8.text-center .d-flex > .butn:first-child,
.legal-back .butn {
    background: var(--rp-green);
    border-color: var(--rp-green);
    color: #0a0a0a;
    font-weight: 600;
    box-shadow: 0 10px 34px -10px rgba(40, 233, 140, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.project .col-lg-8.text-center .d-flex > .butn:first-child span,
.legal-back .butn span { color: #0a0a0a; }
.project .col-lg-8.text-center .d-flex > .butn:first-child span::after,
.legal-back .butn span::after { content: '→'; display: inline-block; margin-left: 10px; transition: transform 0.35s var(--rp-ease); }
@media (hover: hover) and (pointer: fine) {
    .project .col-lg-8.text-center .d-flex > .butn:first-child:hover,
    .legal-back .butn:hover { background: #4ff0a5 !important; border-color: #4ff0a5; color: #0a0a0a !important; }
    .project .col-lg-8.text-center .d-flex > .butn:first-child:hover span,
    .legal-back .butn:hover span { color: #0a0a0a; }
    .project .col-lg-8.text-center .d-flex > .butn:first-child:hover span::after,
    .legal-back .butn:hover span::after { transform: translateX(5px); }
    .butn.butn-bord:hover { border-color: #fff; }
}


/* -----------------------------------------------------------------
   07c · Privacy page — a long-form reading column
   ----------------------------------------------------------------- */
.legal-head { margin-bottom: 38px; }
.legal-head::before {
    content: 'Legal';
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--rp-green);
}
.legal-head h1 {
    font-family: 'Righteous', sans-serif;
    font-size: clamp(44px, 5vw, 66px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.legal-sub { font-size: 17px; line-height: 1.7; color: var(--rp-muted); }
.legal-updated {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--rp-line);
    background: rgba(255, 255, 255, 0.025);
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--rp-label);
}

.legal-tldr {
    position: relative;
    padding: 24px 26px 24px 30px;
    border: 1px solid rgba(40, 233, 140, 0.22);
    border-radius: var(--rp-radius);
    background: linear-gradient(165deg, rgba(40, 233, 140, 0.08), rgba(40, 233, 140, 0.02) 70%);
    overflow: hidden;
}
.legal-tldr::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--rp-green);
}
.legal-tldr p { font-size: 15.5px; line-height: 1.8; }

.legal-sec { margin-bottom: 44px; }
.legal-sec h2 {
    position: relative;
    padding: 0 0 14px;
    margin-bottom: 18px;
    border-bottom: 0;
    font-family: 'Righteous', sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
}
.legal-sec h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(40, 233, 140, 0.55), rgba(255, 255, 255, 0.06) 40%, transparent);
}
.legal-sec p,
.legal-list li { font-size: 15.5px; line-height: 1.85; color: rgba(255, 255, 255, 0.72); }
.legal-list li::before { top: 12px; box-shadow: 0 0 0 3px rgba(40, 233, 140, 0.15); }
.legal-sec code { border-radius: 6px; border: 1px solid rgba(40, 233, 140, 0.2); background: rgba(40, 233, 140, 0.06); }
.legal-back { margin-top: 56px; }


/* -----------------------------------------------------------------
   07d · 404 page
   The only page whose hero column is a centred .col-lg-8 — that is the
   hook, since the markup carries no page class of its own.
   ----------------------------------------------------------------- */
.project .col-lg-8.text-center {
    position: relative;
    padding-top: 80px;
    padding-bottom: 40px;
}
/* An oversized "404" behind the message, in the same soft green fill as the
   footer sign-off (no outline). */
.project .col-lg-8.text-center::before {
    content: '404';
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    z-index: -1;
    font-family: 'Righteous', sans-serif;
    font-size: clamp(170px, 24vw, 320px);
    line-height: 1;
    letter-spacing: -4px;
    color: transparent;
    background: linear-gradient(180deg, rgba(40, 233, 140, 0.2), rgba(40, 233, 140, 0.02) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
}
.project .col-lg-8.text-center > p.main-color {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 3.5px !important;
    text-transform: uppercase;
}
.project .col-lg-8.text-center > p.main-color::before,
.project .col-lg-8.text-center > p.main-color::after {
    content: '';
    width: 36px;
    height: 1px;
}
.project .col-lg-8.text-center > p.main-color::before { background: linear-gradient(270deg, rgba(40, 233, 140, 0.6), transparent); }
.project .col-lg-8.text-center > p.main-color::after  { background: linear-gradient(90deg, rgba(40, 233, 140, 0.6), transparent); }
.project .col-lg-8.text-center > h1 {
    font-family: 'Righteous', sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.5px;
}
.project .col-lg-8.text-center > p.opacity-7 {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16.5px !important;
    color: var(--rp-muted);
    opacity: 1 !important;
}


/* -----------------------------------------------------------------
   08 · Similar section
   ----------------------------------------------------------------- */
.similar-section { position: relative; border-top: 0; }
.similar-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: min(1100px, 86%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}
.similar-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Lexend', 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3.5px;
    color: var(--rp-green);
    margin-bottom: 14px;
}
.similar-label::after {
    content: '';
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(40, 233, 140, 0.6), transparent);
}
.similar-heading {
    font-family: 'Righteous', sans-serif;
    font-size: clamp(38px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.5px;
}

/* Shared card surface, with the cursor-following spotlight from the
   homepage (--mx/--my are written by js/redesign.js). */
.similar-card {
    isolation: isolate;
    border-radius: var(--rp-radius);
    border-color: var(--rp-line);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 60%);
}
.similar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(40, 233, 140, 0.11), transparent 45%);
}
@media (hover: hover) and (pointer: fine) {
    .similar-card:hover::before { opacity: 1; }
}
.similar-card__img-wrap { margin: 8px 8px 0; border-radius: 15px; }
.similar-card__body { padding: 18px 20px 22px; }
.similar-card__cat {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(40, 233, 140, 0.08);
    border: 1px solid rgba(40, 233, 140, 0.2);
    font-size: 10px;
    margin-bottom: 12px;
}
.similar-card__title { font-family: 'Righteous', sans-serif; font-size: 19px; font-weight: 400; line-height: 1.3; }
.similar-card__arrow {
    top: 18px; right: 18px;
    opacity: 1;
    transform: none;
    background: rgba(10, 10, 10, 0.55);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Project pages: the similar cards take the homepage portfolio treatment —
   the title and category laid over the cover. Scoped by link target, so the
   blog page's article cards keep their image-above-text layout. */
a.similar-card[href^="projects.html"] { aspect-ratio: 14 / 9; background: #111; }
a.similar-card[href^="projects.html"] .similar-card__img-wrap {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
}
a.similar-card[href^="projects.html"] .similar-card__img { width: 100%; height: 100%; aspect-ratio: auto; }
a.similar-card[href^="projects.html"] .similar-card__img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 7, 7, 0.95) 0%, rgba(6, 7, 7, 0.55) 30%, transparent 58%);
    pointer-events: none;
}
a.similar-card[href^="projects.html"] .similar-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 20px 22px;
}
a.similar-card[href^="projects.html"] .similar-card__arrow { z-index: 3; }


/* -----------------------------------------------------------------
   09 · Footer + floating CTA
   ----------------------------------------------------------------- */
footer.lp-footer {
    position: relative;
    padding: 30px 0 46px;
    border-top: 0;
    overflow: hidden;
}
footer.lp-footer::before {
    content: 'Let\2019s create';
    display: block;
    margin: 0 0 40px;
    font-family: 'Righteous', sans-serif;
    font-size: clamp(56px, 12.5vw, 210px);
    line-height: 0.95;
    white-space: nowrap;
    letter-spacing: -2px;
    color: transparent;
    background: linear-gradient(180deg, rgba(40, 233, 140, 0.26), rgba(40, 233, 140, 0.05) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
}
footer.lp-footer .social li a {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--rp-line-2);
    transition: opacity 0.25s, border-color 0.25s, color 0.25s, transform 0.35s var(--rp-ease);
}
@media (hover: hover) and (pointer: fine) {
    footer.lp-footer .social li a:hover { color: var(--rp-green); border-color: var(--rp-green); transform: translateY(-3px); }
}

.hire-me-float {
    padding: 12px 20px;
    font-family: 'Lexend', 'Poppins', sans-serif;
    letter-spacing: 1.4px;
    box-shadow: 0 14px 40px -10px rgba(40, 233, 140, 0.8);
}
.hire-pulse { width: 8px; height: 8px; background: #fff; animation: rpPing 2s infinite; }
@keyframes rpPing {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


/* -----------------------------------------------------------------
   09b · Contact dial — the homepage's phone control, on these pages too
   The rules are the homepage's own (css/index-mobile.css) with its tokens
   written out, since that sheet is not loaded here. Desktop never shows it.
   ----------------------------------------------------------------- */
.im-dial, .im-dial-veil { display: none; }

@media (max-width: 991.98px) {
    .hire-me-float { display: none !important; }

    .im-dial-veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9997;
        background: rgba(8, 8, 8, 0.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s var(--rp-ease), visibility 0.35s;
    }
    body.im-dial-on .im-dial-veil { opacity: 1; visibility: visible; }

    .im-dial {
        display: block;
        position: fixed;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 9998;
        width: 60px; height: 60px;
    }
    .im-dial-btn {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: var(--rp-green);
        color: #06251a;
        box-shadow: 0 12px 34px -8px rgba(40, 233, 140, 0.75);
        transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    body.im-dial-on .im-dial-btn { transform: rotate(135deg); }

    /* An explicit 70px box (5px round the button) — without it the <svg>
       keeps a default size and the ring sits off-centre. */
    .im-dial-ring {
        position: absolute;
        top: -5px; left: -5px;
        width: 70px; height: 70px;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        pointer-events: none;
    }
    .im-dial-ring circle { fill: none; stroke-width: 2.5; }
    .im-dial-ring .im-bg { stroke: rgba(255, 255, 255, 0.1); }
    .im-dial-ring .im-fg {
        stroke: var(--rp-green);
        stroke-linecap: round;
        stroke-dasharray: 201;
        stroke-dashoffset: 201;
        transition: stroke-dashoffset 0.12s linear;
    }

    .im-dial-item {
        position: absolute;
        right: 6px; bottom: 6px;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 48px;
        padding: 0 16px 0 6px;
        border-radius: 24px;
        background: #171717;
        border: 1px solid var(--rp-line-2);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(0) scale(0.5);
        pointer-events: none;
        transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s var(--rp-ease);
    }
    .im-dial-item em {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        border-radius: 50%;
        background: rgba(40, 233, 140, 0.13);
        color: var(--rp-green);
        font-style: normal;
    }
    body.im-dial-on .im-dial-item { opacity: 1; pointer-events: auto; }
    body.im-dial-on .im-dial-item:nth-child(1) { transform: translateY(-70px)  scale(1); transition-delay: 0.04s; }
    body.im-dial-on .im-dial-item:nth-child(2) { transform: translateY(-128px) scale(1); transition-delay: 0.09s; }
    body.im-dial-on .im-dial-item:nth-child(3) { transform: translateY(-186px) scale(1); transition-delay: 0.14s; }
    body.im-dial-on .im-dial-item:nth-child(4) { transform: translateY(-244px) scale(1); transition-delay: 0.19s; }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .im-dial-item,
    .im-dial-btn { transition-duration: 0.001ms; }
}


/* -----------------------------------------------------------------
   10 · Tablet + phone
   ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body::after { opacity: 0.04; }
    .project.section-padding::before { height: 600px; background-size: 24px 24px; }

    .proj-hero-wrap { padding: 7px; border-radius: 22px; }
    .proj-hero-wrap img,
    .proj-hero-wrap__inner,
    .proj-hero-wrap > .proj-hero-overlay,
    .proj-hero-wrap__inner .proj-hero-overlay { border-radius: 15px; }
    .proj-hero-wrap > .proj-hero-overlay { inset: 7px; }

    #blog-title,
    #work-title { font-size: 36px; }
    #blog-description,
    #work-description { font-size: 15.5px !important; }
    #blog-sub-description,
    #work-sub-description { font-size: 15px !important; }

    .proj-info-card { border-radius: 22px; }

    #blog-full-content { font-size: 15.5px; }
    #blog-full-content .title h5 { font-size: 23px; margin-top: 34px; }
    #blog-full-content .iner-img { height: auto; }

    /* "More Work / Similar Projects / Prev · Next" stacks and centres on the
       page, with the eyebrow's rule drawn on both sides. The bootstrap
       utilities on this row are !important, so these have to be too. */
    .similar-section .d-flex.align-items-center.mb-40 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
        text-align: center;
    }
    .similar-section .d-flex.align-items-center.mb-40 > .ml-auto {
        margin-left: 0 !important;
        justify-content: center;
    }
    .similar-label { justify-content: center; }
    .similar-label::before {
        content: '';
        width: 30px;
        height: 1px;
        background: linear-gradient(270deg, rgba(40, 233, 140, 0.6), transparent);
    }
    .similar-label::after { width: 30px; }
    .similar-heading { font-size: 34px; }

    /* Tags + share: stacked and centred, like the section above it. */
    #blog-full-content .info-area {
        flex-direction: column;
        align-items: center;
        padding: 22px 18px !important;
        text-align: center;
    }
    #blog-full-content .info-area .tags,
    #blog-full-content .info-area .share-icon { align-items: center; width: 100%; }
    #blog-full-content .info-area .tags > div:last-child,
    #blog-full-content .info-area .share-icon > div:last-child { justify-content: center; }

    #blog-full-content .author-area { padding: 24px 20px; text-align: center; }
    #blog-full-content .author-area .author-img { display: flex; justify-content: center; margin: 0 0 18px !important; }
    #blog-full-content .author-area .author-img .img { width: 76px; height: 76px; }

    footer.lp-footer { padding: 20px 0 40px; }
    footer.lp-footer::before { font-size: 12.5vw; letter-spacing: -1px; text-align: center; margin-bottom: 26px; }
    footer.lp-footer .social li a { width: 42px; height: 42px; margin: 0 4px; }
}

@media (max-width: 576px) {
    .proj-breadcrumb { font-size: 11.5px; padding: 7px 13px; }
    #blog-title,
    #work-title { font-size: 31px; }
    .proj-info-row { padding: 14px 20px; }
    .proj-info-card__head { padding: 22px 20px 18px; }
    .proj-info-card__cta { padding: 16px 20px 22px; }
    .masonry-gallery .img { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .proj-info-card,
    .hire-pulse { animation: none; }
}