/* ==========================================================================
   Reno Island — Custom Theme Styles
   Mixed dark/light design inspired by uframedit luxury aesthetic
   ========================================================================== */


/* ==========================================================================
   1. RESET & GLOBAL
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    transition: color 0.25s ease, opacity 0.25s ease;
}

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


/* ==========================================================================
   2. KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes lineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Scroll-triggered entrance — applied via JS or simply on load */
main > .wp-block-group,
main > .wp-block-cover {
    animation: fadeInUp 0.7s ease-out both;
}

main > .wp-block-group:nth-child(2) { animation-delay: 0.1s; }
main > .wp-block-group:nth-child(3) { animation-delay: 0.15s; }
main > .wp-block-group:nth-child(4) { animation-delay: 0.2s; }
main > .wp-block-group:nth-child(5) { animation-delay: 0.25s; }


/* ==========================================================================
   3. BUTTONS — Gold gradient (uframedit style)
   ========================================================================== */
.wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
    background: linear-gradient(135deg, #c9a96e, #a8893e) !important;
    color: #12121e !important;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.2);
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(201, 169, 110, 0.35);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--accent) !important;
    color: var(--wp--preset--color--accent) !important;
    box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: linear-gradient(135deg, #c9a96e, #a8893e) !important;
    color: #12121e !important;
    border-color: var(--wp--preset--color--accent) !important;
}


/* ==========================================================================
   4. HEADER — Fixed dark bar at top
   ========================================================================== */
header .wp-block-group:first-child,
.wp-block-template-part[data-area="header"] > .wp-block-group {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--wp--preset--color--secondary) !important;
    border-bottom: 1px solid rgba(201, 169, 110, 0.13);
}

/* Nav link styles */
.ri-main-nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.ri-main-nav a {
    color: #f5f0e8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.25s ease;
}

.ri-main-nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ri-main-nav a:hover {
    color: var(--wp--preset--color--accent);
}

.ri-main-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Language switcher */
.ri-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ri-lang-switcher a {
    color: rgba(245, 240, 232, 0.6);
    text-decoration: none;
    transition: color 0.25s ease;
}

.ri-lang-switcher a:hover,
.ri-lang-switcher a.active {
    color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   5. HERO — Full-viewport, dramatic dark overlay
   ========================================================================== */
.wp-block-cover {
    position: relative;
}

/* Full-viewport hero only on the front page's first cover block */
body.home .wp-block-cover:first-of-type {
    min-height: 100vh !important;
}

body.home .wp-block-cover:first-of-type::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 46, 0.7) 0%,
        rgba(26, 26, 46, 0.4) 40%,
        rgba(14, 14, 26, 0.8) 100%
    );
    z-index: 1;
    pointer-events: none;
}

body.home .wp-block-cover:first-of-type::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to top, var(--wp--preset--color--background), transparent);
    pointer-events: none;
    z-index: 1;
}

.wp-block-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.9s ease-out both;
    animation-delay: 0.3s;
}

.wp-block-cover h1 {
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 4px 60px rgba(0, 0, 0, 0.4);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    color: #f5f0e8;
}

.wp-block-cover h1 + p,
.wp-block-cover h1 + .wp-block-paragraph {
    font-style: italic;
    font-size: 1.2rem;
    opacity: 0.85;
    letter-spacing: 0.5px;
    color: #f5f0e8;
}


/* ==========================================================================
   6. STATS BAR — White cards overlapping hero bottom
   ========================================================================== */
.ri-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(26, 26, 46, 0.18),
                0 4px 12px rgba(26, 26, 46, 0.08);
    animation: scaleIn 0.6s ease-out both;
    animation-delay: 0.5s;
}

.ri-stat {
    padding: 32px 20px;
    text-align: center;
    background: var(--wp--preset--color--white);
    border-right: 1px solid rgba(26, 26, 46, 0.06);
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
}

.ri-stat:last-child {
    border-right: none;
}

.ri-stat::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 40px;
    height: 3px;
    background: var(--wp--preset--color--accent);
    border-radius: 2px;
    transition: transform 0.35s ease;
}

.ri-stat:hover {
    background: #faf7f2;
}

.ri-stat:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.ri-stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--wp--preset--color--accent);
    line-height: 1;
    margin-bottom: 6px;
}

.ri-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--wp--preset--color--text-muted);
}


/* ==========================================================================
   7. SECTION DIVIDERS — Gold accent line
   ========================================================================== */
main > .wp-block-group + .wp-block-group::before {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--wp--preset--color--accent), transparent);
    margin: 0 auto 0;
    border-radius: 2px;
}

/* Centered heading underline accent */
main h2.has-text-align-center {
    font-family: Georgia, "Times New Roman", serif;
    position: relative;
    padding-bottom: 20px;
}

main h2.has-text-align-center::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--wp--preset--color--accent);
    border-radius: 2px;
}

/* Left-aligned heading accent */
main h2:not(.has-text-align-center) {
    font-family: Georgia, "Times New Roman", serif;
    position: relative;
}


/* ==========================================================================
   8. SERVICE CARDS — Light bg, white cards, gold hover accent
   ========================================================================== */
.wp-block-columns .wp-block-group.has-white-background-color,
.ri-service-card {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 16px rgba(26, 26, 46, 0.06);
    border: 1px solid rgba(26, 26, 46, 0.08);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* Gold accent line at top — hidden until hover */
.wp-block-columns .wp-block-group.has-white-background-color::before,
.ri-service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--wp--preset--color--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-block-columns .wp-block-group.has-white-background-color:hover,
.ri-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(26, 26, 46, 0.12);
    border-color: rgba(201, 169, 110, 0.2);
}

.wp-block-columns .wp-block-group.has-white-background-color:hover::before,
.ri-service-card:hover::before {
    transform: scaleX(1);
}

/* Service card image area */
.ri-service-card .wp-block-image,
.wp-block-columns .wp-block-group.has-white-background-color .wp-block-image {
    border-radius: 0 !important;
    margin: 0;
}

.ri-service-card .wp-block-image img,
.wp-block-columns .wp-block-group.has-white-background-color .wp-block-image:first-child img {
    border-radius: 12px 12px 0 0;
    width: 100%;
    object-fit: cover;
}

/* GoNano card special treatment */
.ri-service-card--gonano {
    border: 2px solid rgba(201, 169, 110, 0.2) !important;
    background: linear-gradient(135deg, #fffbf5, #fff8f0) !important;
}

.ri-service-card--gonano:hover {
    box-shadow: 0 20px 50px rgba(201, 169, 110, 0.2) !important;
}


/* ==========================================================================
   9. DIAGONAL / ANGLED SECTIONS
   ========================================================================== */
.ri-angled-top {
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
    margin-top: -40px;
    padding-top: calc(var(--wp--preset--spacing--60) + 40px) !important;
}

.ri-angled-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    padding-bottom: calc(var(--wp--preset--spacing--60) + 40px) !important;
}


/* ==========================================================================
   10. PROCESS STEPS — Dark section, gold numbered circles
   ========================================================================== */
.ri-process-steps {
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    position: relative;
    padding-top: 16px;
}

/* Connecting horizontal line behind the circles */
.ri-process-steps::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 60px;
    right: 60px;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--accent),
        rgba(201, 169, 110, 0.3),
        var(--wp--preset--color--accent)
    );
    opacity: 0.3;
    z-index: 0;
}

.ri-process-step {
    text-align: center;
    padding: 32px 20px 28px;
    background: var(--wp--preset--color--card-dark);
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 110, 0.13);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
}

.ri-process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
}

.ri-process-step h3,
.ri-process-step h4 {
    color: #f5f0e8;
}

.ri-process-step p {
    color: #8a8aaa;
}

.ri-process-step::before {
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wp--preset--color--accent), #a8893e);
    color: #12121e;
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 16px;
    box-shadow: 0 6px 20px rgba(201, 169, 110, 0.3);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ri-process-step:hover::before {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(201, 169, 110, 0.4);
}


/* ==========================================================================
   11. TESTIMONIALS — Light section, white cards, gold accents
   ========================================================================== */
.ri-testimonial {
    background: var(--wp--preset--color--white);
    padding: 40px 36px 32px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.07);
    position: relative;
    transition: all 0.35s ease;
    border-top: none;
    overflow: hidden;
}

/* Gold accent line above the quote */
.ri-testimonial::before {
    content: "";
    position: absolute;
    top: 0;
    left: 36px;
    width: 50px;
    height: 3px;
    background: var(--wp--preset--color--accent);
    border-radius: 2px;
}

/* Large decorative quote mark */
.ri-testimonial::after {
    content: "\201C";
    position: absolute;
    top: 8px;
    right: 28px;
    font-size: 6rem;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--wp--preset--color--accent);
    opacity: 0.1;
    line-height: 1;
    pointer-events: none;
}

.ri-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(26, 26, 46, 0.12);
}

.ri-testimonial-stars {
    color: var(--wp--preset--color--accent);
    font-size: 1.1rem;
    margin-bottom: 14px;
    letter-spacing: 2px;
}

/* Testimonial blockquote text */
.ri-testimonial blockquote,
.ri-testimonial p {
    font-style: italic;
    line-height: 1.75;
    color: #555;
}

/* Testimonial author name */
.ri-testimonial strong,
.ri-testimonial cite {
    color: var(--wp--preset--color--primary);
    font-style: normal;
    font-weight: 700;
}


/* ==========================================================================
   12. FAQ ACCORDION — Gold left border on open
   ========================================================================== */
.ri-faq details {
    border: 1px solid #e8e4df;
    border-radius: 10px;
    padding: 0;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--wp--preset--color--white);
    border-left: 3px solid transparent;
}

.ri-faq details:hover {
    border-color: rgba(201, 169, 110, 0.3);
    border-left-color: rgba(201, 169, 110, 0.3);
}

.ri-faq details[open] {
    box-shadow: 0 6px 24px rgba(26, 26, 46, 0.08);
    border-color: rgba(201, 169, 110, 0.2);
    border-left-color: var(--wp--preset--color--accent);
}

.ri-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    transition: background 0.2s ease, color 0.2s ease;
}

.ri-faq summary::-webkit-details-marker {
    display: none;
}

.ri-faq summary:hover {
    background: var(--wp--preset--color--background);
}

.ri-faq details[open] summary {
    color: var(--wp--preset--color--accent);
}

.ri-faq summary::after {
    content: "+";
    font-size: 1.4em;
    color: var(--wp--preset--color--accent);
    transition: transform 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(201, 169, 110, 0.1);
}

.ri-faq details[open] summary::after {
    content: "\2212";
    transform: rotate(180deg);
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
}

.ri-faq details p {
    padding: 0 24px 20px;
    color: #555;
    line-height: 1.75;
}


/* ==========================================================================
   13. PROJECT CARDS — Dark overlay on hover with title
   ========================================================================== */
.wp-block-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px !important;
}

.wp-block-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 12px;
}

.wp-block-image:hover img {
    transform: scale(1.06);
}

/* Dark overlay on hover */
.wp-block-image a::after,
.ri-project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 30%,
        rgba(26, 26, 46, 0.85) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 12px;
    z-index: 1;
    pointer-events: none;
}

.wp-block-image:hover a::after,
.ri-project-card:hover::after {
    opacity: 1;
}

/* Project title overlay — uses figcaption */
.wp-block-image figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: #f5f0e8;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    background: transparent !important;
}

.wp-block-image:hover figcaption {
    transform: translateY(0);
    opacity: 1;
}


/* ==========================================================================
   14. TRUST BADGES — Clean floating row
   ========================================================================== */
.ri-trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    padding: 28px 36px;
    background: var(--wp--preset--color--white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(26, 26, 46, 0.07);
}

.ri-trust-bar img {
    height: 48px;
    width: auto;
    opacity: 0.8;
    transition: all 0.35s ease;
    filter: saturate(0.7) brightness(0.95);
}

.ri-trust-bar img:hover {
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: scale(1.1);
}


/* ==========================================================================
   15. BEFORE / AFTER SLIDER
   ========================================================================== */
.ri-before-after {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 36px rgba(26, 26, 46, 0.12);
}

.ri-before-after img {
    display: block;
    width: 100%;
}

.ri-before-after .ri-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
}

.ri-before-after .ri-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    background: var(--wp--preset--color--accent);
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.4);
}

.ri-before-after .ri-slider::after {
    content: "\2194";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: var(--wp--preset--color--accent);
    border-radius: 50%;
    border: 3px solid #f5f0e8;
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.4);
    color: #12121e;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   16. GoNano SPOTLIGHT — Gold gradient background
   ========================================================================== */
.has-accent-background-color {
    background: linear-gradient(135deg, #c9a96e 0%, #a8893e 50%, #c9a96e 100%) !important;
}


/* ==========================================================================
   17. CTA SECTION — Dark section with radial glow
   ========================================================================== */
.wp-block-group.has-primary-background-color {
    position: relative;
    overflow: hidden;
}

.wp-block-group.has-primary-background-color::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(201, 169, 110, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Text colors inside dark primary sections */
.wp-block-group.has-primary-background-color h2,
.wp-block-group.has-primary-background-color h3 {
    color: #f5f0e8;
    font-family: Georgia, "Times New Roman", serif;
}

.wp-block-group.has-primary-background-color p {
    color: #8a8aaa;
}


/* ==========================================================================
   18. FOOTER — Deep dark gradient
   ========================================================================== */
footer .wp-block-group.has-primary-background-color,
.wp-block-template-part[data-area="footer"] .wp-block-group.has-primary-background-color {
    background: linear-gradient(180deg, #16162a 0%, #0e0e1a 100%) !important;
}

footer .wp-block-group.has-secondary-background-color,
.wp-block-template-part[data-area="footer"] .wp-block-group.has-secondary-background-color {
    background: linear-gradient(180deg, #16162a 0%, #0e0e1a 100%) !important;
}

/* Footer headings */
footer h3,
.wp-block-template-part[data-area="footer"] h3 {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 20px !important;
    color: #f5f0e8;
    font-family: Georgia, "Times New Roman", serif;
}

footer h3::after,
.wp-block-template-part[data-area="footer"] h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--wp--preset--color--accent);
    border-radius: 1px;
}

/* Footer list links */
ul.is-style-no-bullets {
    list-style: none;
    padding-left: 0;
}

ul.is-style-no-bullets li {
    padding: 5px 0;
}

ul.is-style-no-bullets a {
    color: rgba(245, 240, 232, 0.65);
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    padding-left: 0;
    font-size: 0.88rem;
}

ul.is-style-no-bullets a:hover {
    color: var(--wp--preset--color--accent);
    padding-left: 8px;
}

/* Footer links in grid (from PHP template) */
footer a,
.wp-block-template-part[data-area="footer"] a {
    transition: color 0.25s ease, padding-left 0.25s ease;
}

footer a:hover,
.wp-block-template-part[data-area="footer"] a:hover {
    color: var(--wp--preset--color--accent) !important;
}

/* Footer separator */
footer .wp-block-separator,
.wp-block-template-part[data-area="footer"] .wp-block-separator {
    opacity: 0.12;
    margin-top: 40px;
    margin-bottom: 24px;
}

/* Footer CTA button */
footer .wp-block-button__link,
.wp-block-template-part[data-area="footer"] .wp-block-button__link {
    transition: all 0.3s ease;
}

footer .wp-block-button__link:hover,
.wp-block-template-part[data-area="footer"] .wp-block-button__link:hover {
    box-shadow: 0 6px 24px rgba(201, 169, 110, 0.35);
}


/* ==========================================================================
   19. SCROLLBAR — Branded gold
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--wp--preset--color--background);
}

::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8893e;
}

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--accent) var(--wp--preset--color--background);
}


/* ==========================================================================
   20. MOBILE STICKY CTA
   ========================================================================== */
.ri-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 12px 16px;
    background: var(--wp--preset--color--secondary);
    gap: 8px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ri-mobile-cta a {
    flex: 1;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.ri-mobile-cta .ri-cta-call {
    background: #f5f0e8;
    color: var(--wp--preset--color--primary);
}

.ri-mobile-cta .ri-cta-quote {
    background: linear-gradient(135deg, var(--wp--preset--color--accent), #a8893e);
    color: #12121e;
}

.ri-mobile-cta a:active {
    transform: scale(0.97);
}


/* ==========================================================================
   21. RESPONSIVE — Mobile & Tablet
   ========================================================================== */

/* ---------- Tablet (max 1024px) ---------- */
@media (max-width: 1024px) {
    .ri-process-steps::before {
        display: none;
    }

    .ri-stats-bar {
        max-width: 90%;
    }
}

/* ---------- Mobile (max 782px) ---------- */
@media (max-width: 782px) {
    /* Stats bar: 2-column grid */
    .ri-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        margin: -30px 16px 0;
        border-radius: 12px;
    }

    .ri-stat:nth-child(1),
    .ri-stat:nth-child(2) {
        border-bottom: 1px solid rgba(26, 26, 46, 0.06);
    }

    .ri-stat {
        padding: 24px 16px;
    }

    .ri-stat-number {
        font-size: 1.8rem;
    }

    /* Process steps: stack */
    .ri-process-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Show mobile CTA */
    .ri-mobile-cta {
        display: flex;
    }

    body {
        padding-bottom: 70px;
    }

    /* Hero adjustments */
    body.home .wp-block-cover:first-of-type {
        min-height: 85vh !important;
    }

    .wp-block-cover h1 {
        font-size: 2rem !important;
        letter-spacing: 1.5px;
    }

    /* Testimonials: stack */
    .ri-testimonial {
        padding: 32px 24px 24px;
    }

    /* FAQ */
    .ri-faq summary {
        padding: 16px 20px;
        font-size: 0.95rem;
    }

    /* Footer grid stacks */
    footer [style*="grid-template-columns"],
    .wp-block-template-part[data-area="footer"] [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* ---------- Small phones (max 480px) ---------- */
@media (max-width: 480px) {
    .ri-stats-bar {
        grid-template-columns: 1fr;
        margin: -20px 12px 0;
    }

    .ri-stat {
        border-right: none;
        border-bottom: 1px solid rgba(26, 26, 46, 0.06);
    }

    .ri-stat:last-child {
        border-bottom: none;
    }

    .wp-block-cover h1 {
        font-size: 1.6rem !important;
    }
}


/* ==========================================================================
   22. HEADER SCROLL EFFECT
   ========================================================================== */

/* Header base styles */
header.wp-block-template-part {
    z-index: 1000;
    background: #12121e;
}


/* ==========================================================================
   23. SCROLL FADE-IN ANIMATIONS
   ========================================================================== */

/* Elements waiting to animate */
.ri-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Elements that have entered viewport */
.ri-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Section 24 removed — mobile CTA styles consolidated in sections 20/21 */


/* ==========================================================================
   25. FLAGSHIP SERVICE CARDS
   ========================================================================== */

.ri-flagship-card {
    border: 2px solid rgba(201, 169, 110, 0.2);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ri-flagship-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(26, 26, 46, 0.12);
    border-color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   26. COMPACT SERVICE CARDS
   ========================================================================== */

.ri-compact-service {
    border: 1px solid rgba(26, 26, 46, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ri-compact-service:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.1);
}


/* ==========================================================================
   27. GONANO BANNER — Gold gradient
   ========================================================================== */

.ri-gonano-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 40px;
    background: linear-gradient(135deg, var(--wp--preset--color--accent) 0%, #a8893e 100%);
    border-radius: 12px;
}

.ri-gonano-banner__text {
    flex: 1;
}

.ri-gonano-banner__btn {
    display: inline-block;
    padding: 14px 28px;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ri-gonano-banner__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 782px) {
    .ri-gonano-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
}


/* ==========================================================================
   28. PROJECT CARDS
   ========================================================================== */

.ri-project-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ri-project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.ri-project-card__image {
    position: relative;
    overflow: hidden;
}

.ri-project-card__image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ri-project-card:hover .ri-project-card__image img {
    transform: scale(1.05);
}

.ri-project-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.ri-project-card__type {
    color: #f5f0e8;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ri-project-card__body {
    padding: 16px 20px 20px;
}

.ri-project-card__location {
    color: var(--wp--preset--color--accent);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ri-project-card__desc {
    color: var(--wp--preset--color--foreground);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}


/* ==========================================================================
   29. BADGE LINE & BULLET CHECK
   ========================================================================== */

.ri-badge-line {
    color: var(--wp--preset--color--accent);
    letter-spacing: 3px;
}

.ri-bullet-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ri-bullet-check li {
    color: rgba(245, 240, 232, 0.9);
    font-size: 1.05rem;
    line-height: 1.8;
    padding-left: 28px;
    position: relative;
}

.ri-bullet-check li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--accent);
    font-weight: 700;
    font-size: 1.1rem;
}


/* ==========================================================================
   30. PHONE HEADER
   ========================================================================== */

.ri-phone-header {
    color: #f5f0e8;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color 0.25s ease;
}

.ri-phone-header:hover {
    color: var(--wp--preset--color--accent);
}


/* ==========================================================================
   31. SMOOTH TRANSITIONS — Global polish
   ========================================================================== */

/* All interactive elements get smooth transitions */
.wp-block-group,
.wp-block-column,
.wp-block-image,
details,
summary {
    transition-property: transform, box-shadow, border-color, opacity;
    transition-duration: 0.35s;
    transition-timing-function: ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   32. DARK SECTION UTILITY — For process, GoNano, CTA sections
   ========================================================================== */
.ri-section-dark {
    background: var(--wp--preset--color--primary);
}

.ri-section-dark h2,
.ri-section-dark h3 {
    color: #f5f0e8;
    font-family: Georgia, "Times New Roman", serif;
}

.ri-section-dark p {
    color: #8a8aaa;
}


/* ==========================================================================
   33. SCROLL INDICATOR — Bouncing chevron at hero bottom
   ========================================================================== */

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(10px); opacity: 1; }
}

.ri-scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    animation: bounceDown 2s ease-in-out infinite;
}

.ri-scroll-indicator__chevron {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-right: 2px solid var(--wp--preset--color--accent);
    border-bottom: 2px solid var(--wp--preset--color--accent);
    transform: rotate(45deg);
    opacity: 0.7;
}

.ri-scroll-indicator__text {
    display: block;
    color: rgba(245, 240, 232, 0.5);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
}

/* Hide on short hero sections (sub-pages) — only show on full-viewport heroes */
.wp-block-cover .ri-scroll-indicator {
    bottom: 24px;
}


/* ==========================================================================
   34. QUOTE FORM — Dark/gold design system
   ========================================================================== */

.ri-quote-form {
    max-width: 640px;
    margin: 0 auto;
}

.ri-quote-form .ri-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ri-quote-form .ri-form-row--full {
    grid-template-columns: 1fr;
}

.ri-quote-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(245, 240, 232, 0.7);
    margin-bottom: 6px;
}

.ri-quote-form input,
.ri-quote-form select,
.ri-quote-form textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(245, 240, 232, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.2);
    border-radius: 8px;
    color: #f5f0e8;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.ri-quote-form input:focus,
.ri-quote-form select:focus,
.ri-quote-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent);
    background: rgba(201, 169, 110, 0.06);
}

.ri-quote-form input::placeholder,
.ri-quote-form textarea::placeholder {
    color: rgba(245, 240, 232, 0.35);
}

.ri-quote-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a96e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

.ri-quote-form select option {
    background: #1e1e30;
    color: #f5f0e8;
}

.ri-quote-form textarea {
    min-height: 120px;
    resize: vertical;
}

.ri-quote-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 16px;
    margin-top: 8px;
    background: linear-gradient(135deg, #c9a96e, #a8893e);
    color: #12121e;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ri-quote-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(201, 169, 110, 0.35);
}

.ri-quote-form button[type="submit"]:active {
    transform: translateY(0);
}

.ri-form-success {
    text-align: center;
    padding: 40px 20px;
    color: #f5f0e8;
}

.ri-form-success h3 {
    color: var(--wp--preset--color--accent);
    margin-bottom: 12px;
}

/* Light-bg form variant (for contact page) */
.ri-quote-form--light label {
    color: var(--wp--preset--color--primary);
}

.ri-quote-form--light input,
.ri-quote-form--light select,
.ri-quote-form--light textarea {
    background: #fff;
    border-color: rgba(26, 26, 46, 0.15);
    color: var(--wp--preset--color--foreground);
}

.ri-quote-form--light input:focus,
.ri-quote-form--light select:focus,
.ri-quote-form--light textarea:focus {
    border-color: var(--wp--preset--color--accent);
    background: #fff;
}

.ri-quote-form--light input::placeholder,
.ri-quote-form--light textarea::placeholder {
    color: rgba(26, 26, 46, 0.4);
}

.ri-quote-form--light select option {
    background: #fff;
    color: var(--wp--preset--color--foreground);
}

@media (max-width: 600px) {
    .ri-quote-form .ri-form-row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   35. SERVICE LANDING PAGE — Feature grid for individual services
   ========================================================================== */

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

.ri-feature-item {
    padding: 32px 24px;
    background: var(--wp--preset--color--white);
    border-radius: 12px;
    border: 1px solid rgba(26, 26, 46, 0.08);
    box-shadow: 0 2px 16px rgba(26, 26, 46, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-align: center;
}

.ri-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(26, 26, 46, 0.1);
}

.ri-feature-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    display: block;
}

.ri-feature-item h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    color: var(--wp--preset--color--primary);
    margin-bottom: 8px;
}

.ri-feature-item p {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Related services row */
.ri-related-services {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.ri-related-service-link {
    display: inline-block;
    padding: 10px 24px;
    background: var(--wp--preset--color--card-dark);
    border: 1px solid rgba(201, 169, 110, 0.13);
    border-radius: 8px;
    color: #f5f0e8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.ri-related-service-link:hover {
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
    transform: translateY(-2px);
}

@media (max-width: 782px) {
    .ri-feature-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   NAVIGATION — Dropdown & Styling
   ========================================================================== */
.ri-nav-list {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.ri-nav-list > li > a {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.25s ease;
    color: #f5f0e8 !important;
}

.ri-nav-list > li > a:hover {
    color: #c9a96e !important;
}

.ri-nav-arrow {
    font-size: 0.65rem;
    margin-left: 2px;
    opacity: 0.6;
}

/* Dropdown */
.ri-has-dropdown {
    position: relative;
}

.ri-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #1a1a2e;
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 12px;
    list-style: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.ri-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #1a1a2e;
    border-top: 0;
}

.ri-has-dropdown:hover > .ri-dropdown {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Invisible bridge so mouse can travel from link to dropdown */
.ri-has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
}

.ri-dropdown li a {
    display: block;
    padding: 10px 20px;
    color: rgba(245, 240, 232, 0.75);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ri-dropdown li a:hover {
    color: #c9a96e;
    background: rgba(201, 169, 110, 0.08);
    padding-left: 24px;
}

/* CTA button in header */
.ri-cta-btn {
    display: inline-block;
    padding: 12px 28px;
    background: linear-gradient(135deg, #c9a96e, #a8893e);
    color: #12121e !important;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.2);
    transition: all 0.3s ease;
}

.ri-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(201, 169, 110, 0.35);
}


/* ==========================================================================
   SOCIAL ICONS
   ========================================================================== */
.ri-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(245, 240, 232, 0.08);
    color: rgba(245, 240, 232, 0.6) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    transition: all 0.25s ease;
}

.ri-social-icon:hover {
    background: rgba(201, 169, 110, 0.15);
    color: #c9a96e !important;
    transform: translateY(-2px);
}

.ri-footer-social .ri-social-icon {
    font-size: 0;
}

.ri-footer-social .ri-social-icon i {
    font-size: 0.9rem;
}


/* ==========================================================================
   SHARE BUTTONS
   ========================================================================== */
.ri-share-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    margin: 24px 0;
    border-top: 1px solid rgba(18, 18, 30, 0.1);
    border-bottom: 1px solid rgba(18, 18, 30, 0.1);
}

.ri-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #12121e;
    margin-right: 4px;
}

.ri-share-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    color: #fff !important;
}

.ri-share-fb  { background: #1877F2; }
.ri-share-tw  { background: #000; }
.ri-share-li  { background: #0A66C2; }
.ri-share-email { background: #12121e; }

.ri-share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
}


/* ==========================================================================
   HERO CAROUSEL — Auto-scrolling background images
   ========================================================================== */
@keyframes heroSlide {
    0%, 25%   { opacity: 1; }
    30%, 55%  { opacity: 0; }
    95%, 100% { opacity: 1; }
}

.ri-hero-carousel {
    position: relative;
    min-height: 85vh;
    overflow: hidden;
}

.ri-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroSlide 20s infinite;
}

.ri-hero-slide:nth-child(1) { animation-delay: 0s; }
.ri-hero-slide:nth-child(2) { animation-delay: 5s; }
.ri-hero-slide:nth-child(3) { animation-delay: 10s; }
.ri-hero-slide:nth-child(4) { animation-delay: 15s; }

.ri-hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(18, 18, 30, 0.7) 0%,
        rgba(18, 18, 30, 0.5) 50%,
        rgba(18, 18, 30, 0.8) 100%
    );
}

.ri-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    padding: calc(var(--wp--preset--spacing--70, 80px) + 60px) 20px var(--wp--preset--spacing--70, 80px);
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.ri-hero-content h1 {
    color: #f5f0e8;
    font-size: 3.8rem;
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 8px;
    text-transform: none;
    letter-spacing: -0.5px;
}

.ri-hero-content h1 .ri-accent {
    color: #c9a96e;
    display: block;
}

.ri-hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(201, 169, 110, 0.12);
    border: 1px solid rgba(201, 169, 110, 0.3);
    border-radius: 100px;
    color: #c9a96e;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 28px;
}

.ri-hero-content p {
    color: rgba(245, 240, 232, 0.8);
    font-size: 1.2rem;
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: 650px;
}

.ri-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.ri-hero-btns .ri-btn-primary {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(135deg, #c9a96e, #a8893e);
    color: #12121e;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
    transition: all 0.3s ease;
}

.ri-hero-btns .ri-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(201, 169, 110, 0.45);
}

.ri-hero-btns .ri-btn-outline {
    display: inline-block;
    padding: 18px 40px;
    border: 2px solid rgba(245, 240, 232, 0.35);
    color: #f5f0e8;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.ri-hero-btns .ri-btn-outline:hover {
    border-color: #c9a96e;
    color: #c9a96e;
    transform: translateY(-3px);
}


/* ==========================================================================
   MISSION / VISION SECTION
   ========================================================================== */
.ri-mission-section {
    padding: 80px 20px;
    background: #f5f0e8;
}

.ri-mission-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.ri-mission-block h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #12121e;
    margin: 0 0 16px;
    position: relative;
    padding-bottom: 12px;
}

.ri-mission-block h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(135deg, #c9a96e, #a8893e);
    border-radius: 2px;
}

.ri-mission-block p {
    color: #3a3a4a;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 782px) {
    .ri-hero-content h1 { font-size: 2.4rem; }
    .ri-hero-content p { font-size: 1rem; }
    .ri-hero-btns { flex-direction: column; align-items: center; }
    .ri-mission-inner { grid-template-columns: 1fr; gap: 40px; }
    .ri-share-bar { flex-wrap: wrap; }
    .ri-nav-list { gap: 16px; }
    .ri-dropdown { min-width: 180px; }
}


/* ==========================================================================
   SERVICE PAGE SHORTCODE STYLES (ri-sp-)
   Duplicated from inline <style> in shortcode-service-pages.php
   to ensure CSS loads even if WordPress strips inline style tags.
   ========================================================================== */

/* Hero */
.ri-sp-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
    padding: clamp(64px, 10vw, 120px) 20px;
}

.ri-sp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18,18,30,.85) 0%, rgba(26,26,46,.75) 100%);
}

.ri-sp-hero * {
    position: relative;
    z-index: 1;
}

.ri-sp-hero__badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #c9a96e;
    margin-bottom: 16px;
}

.ri-sp-hero__title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.15;
}

.ri-sp-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.85);
    margin: 0 0 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.ri-sp-hero__btn {
    display: inline-block;
    padding: 16px 36px;
    background: #c9a96e;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    transition: background .2s;
}

.ri-sp-hero__btn:hover {
    background: #b8944d;
    color: #fff;
}

/* Sections */
.ri-sp-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 96px) 20px;
}

.ri-sp-section--dark {
    background: #1a1a2e;
    max-width: none;
}

.ri-sp-section--dark .ri-sp-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 96px) 20px;
}

.ri-sp-section--cream {
    background: #f5f0e8;
    max-width: none;
}

.ri-sp-section--cream .ri-sp-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 96px) 20px;
}

.ri-sp-heading {
    text-align: center;
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 12px;
}

.ri-sp-heading--light {
    color: #f5f0e8;
}

.ri-sp-subtitle {
    text-align: center;
    color: #555;
    font-size: clamp(.95rem, 1.8vw, 1.1rem);
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 1.6;
}

.ri-sp-subtitle--light {
    color: rgba(245, 240, 232, .7);
}

/* Features Grid */
.ri-sp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ri-sp-feature {
    background: #fff;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}

.ri-sp-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.ri-sp-feature__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 12px;
}

.ri-sp-feature__title {
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.ri-sp-feature__desc {
    color: #555;
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

/* Photo Gallery */
.ri-sp-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ri-sp-gallery__item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3/2;
}

.ri-sp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.ri-sp-gallery__item:hover img {
    transform: scale(1.06);
}

.ri-sp-gallery__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(0deg, rgba(18,18,30,.8) 0%, transparent 100%);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}

/* Process Steps */
.ri-sp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    counter-reset: step-counter;
}

.ri-sp-step {
    counter-increment: step-counter;
    position: relative;
    padding-top: 48px;
}

.ri-sp-step::before {
    content: counter(step-counter);
    position: absolute;
    top: 0;
    left: 0;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 800;
    color: #c9a96e;
    opacity: .6;
}

.ri-sp-step__title {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #c9a96e;
    margin: 0 0 8px;
}

.ri-sp-step__desc {
    color: rgba(245, 240, 232, .8);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
}

/* FAQ */
.ri-sp-faq {
    max-width: 800px;
    margin: 0 auto;
}

.ri-sp-faq details {
    border: 1px solid #e0ddd8;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}

.ri-sp-faq details[open] {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.ri-sp-faq summary {
    padding: 18px 24px;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ri-sp-faq summary::-webkit-details-marker {
    display: none;
}

.ri-sp-faq summary::after {
    content: "+";
    font-size: 1.4rem;
    color: #c9a96e;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .2s;
}

.ri-sp-faq details[open] summary::after {
    content: "\2212";
}

.ri-sp-faq details p {
    padding: 0 24px 18px;
    margin: 0;
    color: #555;
    font-size: .95rem;
    line-height: 1.7;
}

/* CTA Section */
.ri-sp-cta {
    background: linear-gradient(135deg, #12121e 0%, #1a3a5c 100%);
    padding: clamp(48px, 8vw, 96px) 20px;
    text-align: center;
}

.ri-sp-cta__heading {
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: #f5f0e8;
    margin: 0 0 12px;
}

.ri-sp-cta__subtitle {
    color: rgba(245, 240, 232, .7);
    font-size: clamp(.95rem, 1.8vw, 1.1rem);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.ri-sp-cta__btn {
    display: inline-block;
    padding: 16px 36px;
    background: #c9a96e;
    color: #12121e;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    transition: background .2s;
}

.ri-sp-cta__btn:hover {
    background: #d4b87e;
    color: #12121e;
}

/* Related Services */
.ri-sp-related {
    background: #12121e;
    padding: 40px 20px;
    text-align: center;
}

.ri-sp-related__heading {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px;
}

.ri-sp-related__links {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ri-sp-related__link {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(201, 169, 110, .4);
    color: #c9a96e;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s;
}

.ri-sp-related__link:hover {
    background: #c9a96e;
    color: #12121e;
    border-color: #c9a96e;
}

/* Service page responsive */
@media (max-width: 900px) {
    .ri-sp-features { grid-template-columns: repeat(2, 1fr); }
    .ri-sp-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .ri-sp-features { grid-template-columns: 1fr; }
    .ri-sp-steps { grid-template-columns: 1fr; }
    .ri-sp-gallery { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GONANO PAGE STYLES
   (Moved from inline <style> in shortcode — WordPress FSE strips inline styles)
   ========================================================================== */
.ri-pg-gonano{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.ri-pg-gonano *{box-sizing:border-box}
.ri-pg-gonano__hero{background:linear-gradient(135deg,#c9a96e 0%,#a08040 100%);padding:clamp(80px,12vw,140px) 24px clamp(48px,8vw,80px);text-align:center}
.ri-pg-gonano__hero-badge{display:inline-block;border:1px solid rgba(255,255,255,.5);color:#fff;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:6px 18px;border-radius:100px;margin-bottom:20px;background:rgba(255,255,255,.1)}
.ri-pg-gonano__hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:#fff;margin:0 0 16px}
.ri-pg-gonano__hero>p{color:rgba(255,255,255,.85);font-size:clamp(.95rem,1.8vw,1.15rem);margin:0 auto 32px;max-width:680px;line-height:1.6}
.ri-pg-gonano__hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ri-pg-gonano__btn-dark{display:inline-block;padding:14px 28px;background:#1a1a2e;color:#fff;text-decoration:none;border-radius:6px;font-weight:700;font-size:.95rem;transition:background .2s}
.ri-pg-gonano__btn-dark:hover{background:#2d2d4a;color:#fff}
.ri-pg-gonano__btn-white-outline{display:inline-block;padding:14px 28px;border:2px solid #fff;color:#fff;text-decoration:none;border-radius:6px;font-weight:600;font-size:.95rem;transition:all .2s}
.ri-pg-gonano__btn-white-outline:hover{background:rgba(255,255,255,.15)}

/* Stats bar */
.ri-pg-gonano__stats{background:#1a1a2e;padding:48px 20px}
.ri-pg-gonano__stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
@media(max-width:768px){.ri-pg-gonano__stats-inner{grid-template-columns:repeat(2,1fr)}}
.ri-pg-gonano__stat-num{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#c9a96e;display:block;margin-bottom:4px}
.ri-pg-gonano__stat-label{color:rgba(245,240,232,.7);font-size:.85rem;font-weight:500}

/* What is GoNano */
.ri-pg-gonano__what{max-width:900px;margin:0 auto;padding:clamp(48px,8vw,80px) 20px}
.ri-pg-gonano__what h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#f5f0e8;margin:0 0 20px}
.ri-pg-gonano__what>p{font-size:1.05rem;color:rgba(245,240,232,.75);line-height:1.7;margin:0 0 20px}

/* Benefits grid */
.ri-pg-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:768px){.ri-pg-benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ri-pg-benefits-grid{grid-template-columns:1fr}}
.ri-pg-benefit{background:rgba(245,240,232,.06);border-radius:10px;padding:28px 22px;border-left:3px solid #c9a96e}
.ri-pg-benefit__icon{font-size:1.8rem;display:block;margin-bottom:10px}
.ri-pg-benefit h3{font-family:Georgia,serif;font-size:1rem;font-weight:700;color:#f5f0e8;margin:0 0 8px}
.ri-pg-benefit p{font-size:.88rem;color:rgba(245,240,232,.65);line-height:1.6;margin:0}

/* Technology section */
.ri-pg-gonano__tech{background:#f5f0e8;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-gonano__tech-inner{max-width:1100px;margin:0 auto}
.ri-pg-gonano__tech h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#1a1a2e;margin:0 0 12px;text-align:center}
.ri-pg-gonano__tech>div>p{font-size:1.05rem;color:#555;line-height:1.7;max-width:700px;margin:0 auto 48px;text-align:center}
.ri-pg-tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
@media(max-width:768px){.ri-pg-tech-grid{grid-template-columns:1fr}}
.ri-pg-tech-card{background:#fff;border-radius:12px;padding:32px 24px;box-shadow:0 2px 16px rgba(0,0,0,.05)}
.ri-pg-tech-card h3{font-family:Georgia,serif;font-size:1.1rem;font-weight:700;color:#1a1a2e;margin:0 0 12px}
.ri-pg-tech-card p{font-size:.9rem;color:#555;line-height:1.65;margin:0}

/* Roof types */
.ri-pg-gonano__rooftypes{max-width:1100px;margin:0 auto;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-gonano__rooftypes h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#f5f0e8;margin:0 0 48px;text-align:center}
.ri-pg-rooftypes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:768px){.ri-pg-rooftypes-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ri-pg-rooftypes-grid{grid-template-columns:1fr}}
.ri-pg-rooftype{background:rgba(245,240,232,.06);border-radius:10px;padding:24px 20px;border:1px solid rgba(201,169,110,.15);transition:border-color .2s}
.ri-pg-rooftype:hover{border-color:rgba(201,169,110,.4)}
.ri-pg-rooftype h3{font-family:Georgia,serif;font-size:1rem;font-weight:700;color:#c9a96e;margin:0 0 8px}
.ri-pg-rooftype p{font-size:.85rem;color:rgba(245,240,232,.65);line-height:1.5;margin:0}

/* Process */
.ri-pg-gonano__process{background:#f5f0e8;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-gonano__process-inner{max-width:1100px;margin:0 auto;text-align:center}
.ri-pg-gonano__process h2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#1a1a2e;margin:0 0 48px}
.ri-pg-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;text-align:left}
@media(max-width:900px){.ri-pg-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ri-pg-steps{grid-template-columns:1fr}}
.ri-pg-step{position:relative;padding-top:48px}
.ri-pg-step__num{font-family:Georgia,serif;font-size:2rem;font-weight:800;color:#c9a96e;opacity:.6;position:absolute;top:0;left:0}
.ri-pg-step__title{font-family:Georgia,serif;font-size:1rem;font-weight:700;color:#1a1a2e;margin:0 0 8px}
.ri-pg-step__desc{font-size:.85rem;color:#555;line-height:1.6;margin:0}

/* Comparison table */
.ri-pg-gonano__compare{max-width:900px;margin:0 auto;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-gonano__compare h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#f5f0e8;margin:0 0 32px;text-align:center}
.ri-pg-compare-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
.ri-pg-compare-table th{background:#c9a96e;color:#1a1a2e;padding:14px 16px;font-weight:700;font-size:.9rem;text-align:left}
.ri-pg-compare-table td{padding:12px 16px;font-size:.88rem;border-bottom:1px solid rgba(201,169,110,.12)}
.ri-pg-compare-table tr:nth-child(even) td{background:rgba(245,240,232,.04)}
.ri-pg-compare-table td:first-child{color:rgba(245,240,232,.7);font-weight:600}
.ri-pg-compare-table td:nth-child(2){color:#c9a96e;font-weight:600}
.ri-pg-compare-table td:nth-child(3){color:rgba(245,240,232,.5)}

/* Before/After */
.ri-pg-gonano__ba{max-width:900px;margin:0 auto;padding:clamp(48px,8vw,80px) 20px;text-align:center}
.ri-pg-gonano__ba h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#1a1a2e;margin:0 0 12px}
.ri-pg-gonano__ba p{font-size:1rem;color:#555;line-height:1.6;margin:0 auto 32px;max-width:600px}
.ri-pg-ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:600px){.ri-pg-ba-grid{grid-template-columns:1fr}}
.ri-pg-ba-card{border-radius:12px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.06)}
.ri-pg-ba-card img{width:100%;height:240px;object-fit:cover;display:block}
.ri-pg-ba-card__label{background:#1a1a2e;color:#f5f0e8;text-align:center;padding:12px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}

/* Testimonials */
.ri-pg-gonano__testimonials{max-width:1100px;margin:0 auto;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-gonano__testimonials h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#f5f0e8;margin:0 0 48px;text-align:center}
.ri-pg-testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.ri-pg-testimonials-grid{grid-template-columns:1fr}}
.ri-pg-testimonial{background:rgba(245,240,232,.06);border-radius:10px;padding:28px 24px;border-top:3px solid #c9a96e}
.ri-pg-testimonial__stars{color:#c9a96e;font-size:1rem;margin-bottom:12px}
.ri-pg-testimonial__text{font-size:.9rem;color:rgba(245,240,232,.8);line-height:1.65;margin:0 0 16px;font-style:italic}
.ri-pg-testimonial__name{font-weight:700;color:#f5f0e8;font-size:.85rem}
.ri-pg-testimonial__loc{color:rgba(245,240,232,.5);font-size:.8rem}

/* FAQ */
.ri-pg-gonano__faq{background:#f5f0e8;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-gonano__faq-inner{max-width:800px;margin:0 auto}
.ri-pg-gonano__faq h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#1a1a2e;margin:0 0 40px;text-align:center}
.ri-pg-faq-item{border-bottom:1px solid rgba(26,26,46,.1);padding:20px 0}
.ri-pg-faq-item:first-child{border-top:1px solid rgba(26,26,46,.1)}
.ri-pg-faq-q{font-family:Georgia,serif;font-size:1.05rem;font-weight:700;color:#1a1a2e;margin:0 0 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.ri-pg-faq-q::after{content:"+";font-size:1.4rem;color:#c9a96e;font-weight:300;flex-shrink:0;margin-left:16px}
.ri-pg-faq-item.open .ri-pg-faq-q::after{content:"\2212"}
.ri-pg-faq-a{font-size:.92rem;color:#555;line-height:1.65;margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
.ri-pg-faq-item.open .ri-pg-faq-a{max-height:300px}

/* Certification */
.ri-pg-gonano__cert{background:#1a1a2e;padding:clamp(48px,8vw,80px) 20px;text-align:center}
.ri-pg-gonano__cert h3{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;color:#c9a96e;margin:0 0 16px}
.ri-pg-gonano__cert>p{font-size:1rem;color:rgba(245,240,232,.8);max-width:700px;margin:0 auto 32px;line-height:1.65}
.ri-pg-cert-badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ri-pg-cert-badge{background:rgba(201,169,110,.12);border:1px solid rgba(201,169,110,.25);border-radius:8px;padding:10px 20px;color:#c9a96e;font-size:.85rem;font-weight:600}

/* CTA */
.ri-pg-gonano__cta{background:linear-gradient(135deg,#12121e 0%,#1a3a5c 100%);padding:clamp(48px,8vw,96px) 20px;text-align:center}
.ri-pg-gonano__cta h2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#f5f0e8;margin:0 0 16px}
.ri-pg-gonano__cta>p{color:rgba(245,240,232,.7);font-size:1rem;max-width:560px;margin:0 auto 32px;line-height:1.6}
.ri-pg-gonano__cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.ri-pg-btn-gold{display:inline-block;padding:16px 32px;background:linear-gradient(135deg,#c9a96e,#a8893e);color:#12121e;text-decoration:none;border-radius:8px;font-weight:700;font-size:1rem;transition:all .2s}
.ri-pg-btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(201,169,110,.35)}
.ri-pg-btn-outline-light{display:inline-block;padding:16px 32px;border:2px solid rgba(245,240,232,.4);color:#f5f0e8;text-decoration:none;border-radius:8px;font-weight:600;font-size:1rem;transition:all .2s}
.ri-pg-btn-outline-light:hover{border-color:#f5f0e8;background:rgba(245,240,232,.05)}
.ri-pg-gonano__cta-trust{color:rgba(245,240,232,.5);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:2px}


/* ==========================================================================
   SERVICES PAGE STYLES
   (Moved from inline <style> in shortcode)
   ========================================================================== */
.ri-pg-services{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.ri-pg-services *{box-sizing:border-box}
.ri-pg-services__hero{background:#1a1a2e;padding:clamp(80px,12vw,140px) 24px clamp(48px,8vw,80px);text-align:center}
.ri-pg-services__hero-badge{display:inline-block;border:1px solid rgba(201,169,110,.5);color:#c9a96e;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 18px;border-radius:100px;margin-bottom:24px;background:rgba(201,169,110,.08)}
.ri-pg-services__hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:#f5f0e8;margin:0 0 16px}
.ri-pg-services__hero p{color:rgba(245,240,232,.7);font-size:clamp(.95rem,1.8vw,1.15rem);max-width:640px;margin:0 auto;line-height:1.65}
.ri-pg-services__grid-wrap{max-width:1200px;margin:0 auto;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-services__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:64px}
.ri-pg-svc-card{background:#fff;border-radius:12px;padding:32px 24px;box-shadow:0 2px 16px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s;text-decoration:none;display:block;color:inherit}
.ri-pg-svc-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.1)}
.ri-pg-svc-card__icon{font-size:2.2rem;margin-bottom:16px;display:block}
.ri-pg-svc-card__title{font-family:Georgia,serif;font-size:1.15rem;font-weight:700;color:#1a1a2e;margin:0 0 10px}
.ri-pg-svc-card__desc{font-size:.9rem;color:#555;line-height:1.6;margin:0 0 16px}
.ri-pg-svc-card__link{color:#c9a96e;font-weight:600;font-size:.85rem}
.ri-pg-why{background:#f8f6f2;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-why__inner{max-width:1200px;margin:0 auto}
.ri-pg-why__heading{text-align:center;font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#1a1a2e;margin:0 0 12px}
.ri-pg-why__sub{text-align:center;color:#555;font-size:1rem;margin:0 auto 48px;max-width:600px;line-height:1.6}
.ri-pg-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.ri-pg-trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.ri-pg-trust-grid{grid-template-columns:1fr}}
.ri-pg-trust-card{background:#fff;border-radius:10px;padding:28px 20px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.ri-pg-trust-card__icon{font-size:2.4rem;margin-bottom:12px;display:block}
.ri-pg-trust-card__title{font-family:Georgia,serif;font-size:1.05rem;font-weight:700;color:#1a1a2e;margin:0 0 8px}
.ri-pg-trust-card__desc{font-size:.85rem;color:#666;line-height:1.55;margin:0}
.ri-pg-process{max-width:1100px;margin:0 auto;padding:clamp(48px,8vw,96px) 20px;text-align:center}
.ri-pg-process__heading{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#1a1a2e;margin:0 0 8px}
.ri-pg-process__sub{color:#c9a96e;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:0 0 48px}
.ri-pg-cta-bottom{background:linear-gradient(135deg,#12121e 0%,#1a3a5c 100%);padding:clamp(48px,8vw,96px) 20px;text-align:center}
.ri-pg-cta-bottom__heading{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#f5f0e8;margin:0 0 16px}
.ri-pg-cta-bottom__sub{color:rgba(245,240,232,.7);font-size:clamp(.95rem,1.8vw,1.1rem);max-width:560px;margin:0 auto 32px;line-height:1.6}
.ri-pg-cta-bottom__btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}


/* ==========================================================================
   CONTACT PAGE STYLES
   (Moved from inline <style> in shortcode)
   ========================================================================== */
.ri-pg-contact{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.ri-pg-contact *{box-sizing:border-box}
.ri-pg-contact__hero{background:#1a1a2e;padding:clamp(80px,12vw,140px) 24px clamp(48px,8vw,80px);text-align:center}
.ri-pg-contact__hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,5vw,3rem);font-weight:800;color:#f5f0e8;margin:0 0 16px}
.ri-pg-contact__hero p{color:rgba(245,240,232,.7);font-size:clamp(.95rem,1.8vw,1.1rem);margin:0;line-height:1.6}
.ri-pg-contact__body{max-width:1100px;margin:0 auto;padding:clamp(48px,8vw,80px) 20px;display:grid;grid-template-columns:60% 40%;gap:48px}
@media(max-width:768px){.ri-pg-contact__body{grid-template-columns:1fr}}
.ri-pg-contact__form-col h2{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;color:#1a1a2e;margin:0 0 24px}
.ri-pg-contact__info-col h2{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;color:#1a1a2e;margin:0 0 24px}
.ri-pg-contact__info-item{margin-bottom:24px}
.ri-pg-contact__info-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#c9a96e;margin-bottom:6px;display:block}
.ri-pg-contact__info-value{font-size:1rem;color:#333;line-height:1.6}
.ri-pg-contact__info-value a{color:#1a1a2e;text-decoration:none;font-weight:600}
.ri-pg-contact__info-value a:hover{color:#c9a96e}
.ri-pg-contact__trust{background:#f8f6f2;padding:32px 20px;text-align:center}
.ri-pg-contact__trust-text{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#1a1a2e;max-width:600px;margin:0 auto}


/* ==========================================================================
   ABOUT PAGE STYLES
   (Moved from inline <style> in shortcode)
   ========================================================================== */
.ri-pg-about{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.ri-pg-about *{box-sizing:border-box}
.ri-pg-about__hero{background:#1a1a2e;padding:clamp(80px,12vw,140px) 24px clamp(48px,8vw,80px);text-align:center}
.ri-pg-about__hero-badge{display:inline-block;border:1px solid rgba(201,169,110,.5);color:#c9a96e;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 18px;border-radius:100px;margin-bottom:24px;background:rgba(201,169,110,.08)}
.ri-pg-about__hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:#f5f0e8;margin:0 0 16px}
.ri-pg-about__hero p{color:rgba(245,240,232,.7);font-size:clamp(.95rem,1.8vw,1.15rem);margin:0;line-height:1.6}
.ri-pg-about__story{max-width:800px;margin:0 auto;padding:clamp(48px,8vw,80px) 20px;text-align:center}
.ri-pg-about__story h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#1a1a2e;margin:0 0 28px}
.ri-pg-about__story p{font-size:1.05rem;color:#444;line-height:1.75;margin:0 0 20px}
.ri-pg-about__mv{max-width:1000px;margin:0 auto;padding:0 20px clamp(48px,8vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:640px){.ri-pg-about__mv{grid-template-columns:1fr}}
.ri-pg-mv-card{background:#f8f6f2;border-radius:12px;padding:32px 28px;border-top:3px solid #c9a96e}
.ri-pg-mv-card h3{font-family:Georgia,serif;font-size:1.2rem;font-weight:700;color:#1a1a2e;margin:0 0 12px}
.ri-pg-mv-card p{font-size:.95rem;color:#555;line-height:1.65;margin:0}
.ri-pg-about__values{background:#1a1a2e;padding:clamp(48px,8vw,96px) 20px}
.ri-pg-about__values-inner{max-width:1100px;margin:0 auto}
.ri-pg-about__values h2{text-align:center;font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#f5f0e8;margin:0 0 48px}
.ri-pg-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media(max-width:900px){.ri-pg-values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ri-pg-values-grid{grid-template-columns:1fr}}
.ri-pg-value-card{text-align:center}
.ri-pg-value-card h3{font-family:Georgia,serif;font-size:1.1rem;font-weight:700;color:#c9a96e;margin:0 0 12px}
.ri-pg-value-card p{font-size:.9rem;color:rgba(245,240,232,.7);line-height:1.6;margin:0}
.ri-pg-about__team{max-width:800px;margin:0 auto;padding:clamp(48px,8vw,80px) 20px;text-align:center}
.ri-pg-about__team h2{font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#1a1a2e;margin:0 0 20px}
.ri-pg-about__team p{font-size:1.05rem;color:#444;line-height:1.7;margin:0}
.ri-pg-about__stats{display:flex;justify-content:center;gap:clamp(32px,6vw,80px);padding:48px 20px;background:#f8f6f2;flex-wrap:wrap}
.ri-pg-about-stat{text-align:center}
.ri-pg-about-stat__num{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3rem);font-weight:700;color:#1a1a2e;display:block}
.ri-pg-about-stat__label{font-size:.85rem;color:#777;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:4px;display:block}
.ri-pg-about__cta{background:linear-gradient(135deg,#12121e 0%,#1a3a5c 100%);padding:clamp(48px,8vw,80px) 20px;text-align:center}
.ri-pg-about__cta h2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#f5f0e8;margin:0 0 28px}


/* ==========================================================================
   PORTFOLIO PAGE STYLES
   (Moved from inline <style> in shortcode)
   ========================================================================== */
.ri-pg-portfolio{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.ri-pg-portfolio *{box-sizing:border-box}
.ri-pg-portfolio__hero{background:#1a1a2e;padding:clamp(80px,12vw,140px) 24px clamp(48px,8vw,80px);text-align:center}
.ri-pg-portfolio__hero-badge{display:inline-block;color:#c9a96e;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.ri-pg-portfolio__hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:#f5f0e8;margin:0 0 16px}
.ri-pg-portfolio__hero p{color:rgba(245,240,232,.7);font-size:clamp(.95rem,1.8vw,1.15rem);margin:0;line-height:1.6}
.ri-pg-portfolio__intro{max-width:800px;margin:0 auto;padding:clamp(40px,6vw,64px) 20px 0;text-align:center}
.ri-pg-portfolio__intro p{font-size:1.05rem;color:#444;line-height:1.7;margin:0}
.ri-pg-portfolio__grid-wrap{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,64px) 20px clamp(48px,8vw,80px)}
.ri-pg-portfolio__grid-wrap h2{text-align:center;font-family:Georgia,serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;color:#1a1a2e;margin:0 0 40px}
.ri-pg-portfolio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.ri-pg-portfolio__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.ri-pg-portfolio__grid{grid-template-columns:1fr}}
.ri-pg-proj-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.06);transition:transform .2s}
.ri-pg-proj-card:hover{transform:translateY(-4px)}
.ri-pg-proj-card__img{position:relative;overflow:hidden}
.ri-pg-proj-card__img img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .3s}
.ri-pg-proj-card:hover img{transform:scale(1.05)}
.ri-pg-proj-card__type{position:absolute;bottom:12px;left:12px;background:rgba(26,26,46,.85);color:#c9a96e;font-size:.72rem;font-weight:700;padding:6px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:1px}
.ri-pg-proj-card__body{padding:20px}
.ri-pg-proj-card__loc{font-size:.8rem;color:#999;font-weight:600;margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px}
.ri-pg-proj-card__desc{font-size:.9rem;color:#555;line-height:1.55;margin:0}
.ri-pg-portfolio__cta{background:linear-gradient(135deg,#12121e 0%,#1a3a5c 100%);padding:clamp(48px,8vw,96px) 20px;text-align:center}
.ri-pg-portfolio__cta h2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:#f5f0e8;margin:0 0 16px}
.ri-pg-portfolio__cta p{color:rgba(245,240,232,.7);font-size:1rem;max-width:500px;margin:0 auto 32px;line-height:1.6}
.ri-pg-portfolio__cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   RESPONSIVE — Mobile hamburger menu & layout fixes
   ========================================================================== */

/* Hamburger button — hidden on desktop */
.ri-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
    flex-direction: column;
    gap: 5px;
}
.ri-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #f5f0e8;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.ri-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ri-hamburger.active span:nth-child(2) {
    opacity: 0;
}
.ri-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    /* Show hamburger */
    .ri-hamburger {
        display: flex;
    }

    /* Collapse nav wrap */
    .ri-nav-wrap {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #12121e;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 20px 24px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        z-index: 999;
    }
    .ri-nav-wrap.open {
        display: flex !important;
    }

    /* Header inner needs relative for dropdown positioning */
    .ri-header-inner {
        position: relative;
        flex-wrap: nowrap;
    }

    /* Stack nav items vertically */
    .ri-nav-list {
        flex-direction: column;
        gap: 0;
    }
    .ri-nav-list li {
        border-bottom: 1px solid rgba(245,240,232,0.08);
    }
    .ri-nav-list li a {
        display: block;
        padding: 12px 0;
        font-size: 1rem;
    }

    /* Mobile dropdown — always visible when parent is open */
    .ri-has-dropdown .ri-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 16px;
        min-width: unset;
    }
    .ri-has-dropdown .ri-dropdown li a {
        padding: 8px 0;
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* Phone link styled prominently */
    .ri-phone-header {
        font-size: 1rem;
        padding: 12px 0;
        border-bottom: 1px solid rgba(245,240,232,0.08);
    }

    /* CTA button full width */
    .ri-cta-btn {
        display: block;
        text-align: center;
        margin-top: 12px;
        padding: 14px 24px;
    }

    /* Language switcher */
    .ri-lang-switcher {
        display: block;
        text-align: center;
        padding-top: 12px;
    }

    /* Prevent horizontal overflow on all sections */
    .ri-sp-hero,
    .ri-sp-features,
    .ri-sp-process,
    .ri-sp-gallery,
    .ri-sp-faq,
    .ri-sp-testimonials,
    .ri-sp-quote {
        padding-left: 16px;
        padding-right: 16px;
    }
}