:root {
    --brand-dark: #0f172a;
    --brand-deep: #020617;
    --brand-gold: #f59e0b;
    --brand-gold-dark: #b45309;
    --brand-green: #16a34a;
    --text: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --radius-sm: .75rem;
    --radius-md: 1.1rem;
    --radius-lg: 1.6rem;
    --radius-xl: 2.1rem;
    --shadow-sm: 0 10px 30px -24px rgba(15, 23, 42, .42);
    --shadow-md: 0 25px 70px -42px rgba(15, 23, 42, .46);
    --shadow-lg: 0 38px 100px -46px rgba(15, 23, 42, .62);
    --shell: min(1180px, calc(100% - 2rem));
    --header-height: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text); background: var(--surface-soft); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-is-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
svg.icon-sm { width: 1rem; height: 1rem; }
svg.icon-lg { width: 1.75rem; height: 1.75rem; }
.site-shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; inset-inline-start: 1rem; top: -100px; z-index: 1000; padding: .8rem 1rem; border-radius: .8rem; background: var(--brand-gold); color: #111827; font-weight: 900; }
.skip-link:focus { top: 1rem; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-height); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(15,23,42,.86); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: height .25s ease, background .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { height: 70px; background: rgba(2,6,23,.96); box-shadow: 0 20px 44px -34px rgba(0,0,0,.92); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; min-width: max-content; }
.brand-icon { display: grid; place-items: center; color: var(--brand-gold); }
.brand-name { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 900; letter-spacing: .02em; color: #fff; }
.desktop-nav { display: flex; align-items: center; gap: clamp(.7rem, 1.5vw, 1.5rem); margin-inline: auto; }
.desktop-nav > a, .nav-dropdown-trigger { border: 0; padding: .75rem .2rem; background: transparent; color: #cbd5e1; font-weight: 700; transition: color .2s ease; }
.desktop-nav > a:hover, .desktop-nav > a:focus-visible, .nav-dropdown-trigger:hover, .nav-dropdown-trigger:focus-visible { color: var(--brand-gold); }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: .25rem; }
.nav-dropdown-trigger[aria-expanded="true"] + .mega-menu, .nav-dropdown:hover .mega-menu { visibility: visible; opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mega-menu { position: absolute; top: calc(100% + 1rem); inset-inline-start: 50%; width: min(760px, 80vw); padding: 1.25rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1.5rem; background: rgba(15,23,42,.98); box-shadow: 0 34px 90px -32px rgba(0,0,0,.9); visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, .7rem); transition: .22s ease; }
html[dir="rtl"] .mega-menu { transform: translate(50%, .7rem); }
html[dir="rtl"] .nav-dropdown-trigger[aria-expanded="true"] + .mega-menu, html[dir="rtl"] .nav-dropdown:hover .mega-menu { transform: translate(50%, 0); }
.mega-menu-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; padding: .35rem .4rem 1rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.mega-menu-head strong { display: block; margin-top: .25rem; font-size: 1.15rem; color: #fff; }
.mega-menu-head > a { color: var(--brand-gold); font-size: .9rem; font-weight: 800; }
.eyebrow { color: var(--brand-gold); font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.mega-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding-top: 1rem; }
.mega-service { display: flex; align-items: center; gap: .6rem; min-height: 54px; padding: .7rem; border-radius: 1rem; color: #dbeafe; font-size: .92rem; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.mega-service:hover { background: rgba(245,158,11,.1); transform: translateY(-2px); }
.mega-service-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: .8rem; color: var(--brand-gold); background: rgba(245,158,11,.12); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.language-menu { position: relative; }
.language-trigger { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .55rem .72rem; background: rgba(255,255,255,.06); color: #e2e8f0; font-weight: 700; }
.language-trigger[aria-expanded="true"] + .language-popover { visibility: visible; opacity: 1; transform: translateY(0); }
.language-popover { position: absolute; top: calc(100% + .7rem); inset-inline-end: 0; min-width: 150px; padding: .45rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: #0f172a; box-shadow: var(--shadow-lg); visibility: hidden; opacity: 0; transform: translateY(.5rem); transition: .2s ease; }
.language-popover a { display: block; padding: .7rem .8rem; border-radius: .65rem; color: #cbd5e1; font-weight: 700; }
.language-popover a:hover, .language-popover a.is-current { color: #111827; background: var(--brand-gold); }
.header-call, .mobile-call { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .65rem 1rem; border-radius: 999px; background: var(--brand-gold); color: #111827; font-weight: 900; box-shadow: 0 13px 30px -17px rgba(245,158,11,.8); transition: transform .2s ease, background .2s ease; }
.header-call:hover, .mobile-call:hover { background: var(--brand-gold-dark); color: #fff; transform: translateY(-2px); }
.mobile-menu-button { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.14); border-radius: .8rem; background: rgba(255,255,255,.07); color: #fff; }
.menu-close-icon { display: none; }
.mobile-menu-button[aria-expanded="true"] .menu-open-icon { display: none; }
.mobile-menu-button[aria-expanded="true"] .menu-close-icon { display: block; }
.mobile-navigation { display: none; position: fixed; inset: var(--header-height) 0 0; z-index: 90; overflow-y: auto; background: rgba(2,6,23,.98); color: #fff; }
.mobile-navigation-inner { display: grid; gap: .45rem; padding-block: 1rem 2rem; }
.mobile-navigation a, .mobile-navigation summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: .75rem 1rem; border-radius: .9rem; color: #e2e8f0; font-weight: 800; }
.mobile-navigation a:hover, .mobile-navigation summary:hover { background: rgba(255,255,255,.07); color: var(--brand-gold); }
.mobile-navigation summary { cursor: pointer; list-style: none; }
.mobile-navigation summary::-webkit-details-marker { display: none; }
.mobile-service-list { display: grid; gap: .2rem; margin-inline: 1rem; padding: .4rem; border-inline-start: 2px solid rgba(245,158,11,.35); }
.mobile-service-list a { min-height: 42px; font-size: .92rem; }
.mobile-call { margin-top: .5rem; color: #fff !important; }

.page-main { min-height: 70vh; padding-top: var(--header-height); }
.page-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(410px, 58vw, 620px); display: grid; align-items: center; color: #fff; background: var(--brand-dark); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(110deg, rgba(2,6,23,.97) 15%, rgba(15,23,42,.78) 58%, rgba(15,23,42,.5)); }
html[dir="rtl"] .page-hero::before { background: linear-gradient(250deg, rgba(2,6,23,.97) 15%, rgba(15,23,42,.78) 58%, rgba(15,23,42,.5)); }
.page-hero-image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: auto -10% -60% 35%; z-index: -1; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,.22), transparent 68%); filter: blur(20px); }
.page-hero-content { max-width: 760px; padding-block: clamp(5rem, 10vw, 8rem); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; color: #cbd5e1; font-size: .92rem; font-weight: 700; }
.breadcrumbs a:hover { color: var(--brand-gold); }
.breadcrumbs-separator { color: var(--brand-gold); }
.page-badge { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; padding: .45rem .75rem; border: 1px solid rgba(245,158,11,.35); border-radius: 999px; background: rgba(245,158,11,.09); color: #fbbf24; font-size: .84rem; font-weight: 900; }
.page-title { margin: 0; max-width: 900px; font-size: clamp(2.25rem, 6vw, 4.7rem); line-height: .98; letter-spacing: -.035em; font-weight: 900; }
.page-lead { max-width: 690px; margin: 1.35rem 0 0; color: #dbe4f0; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .75rem 1.2rem; border: 1px solid transparent; border-radius: 999px; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--brand-gold); color: #111827; box-shadow: 0 18px 42px -24px rgba(245,158,11,.9); }
.button-primary:hover { background: var(--brand-gold-dark); color: #fff; }
.button-secondary { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(8px); }
.button-secondary:hover { background: rgba(255,255,255,.15); }
.button-dark { background: var(--brand-dark); color: #fff; }
.button-outline { border-color: var(--line); background: #fff; color: var(--brand-dark); }

.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section-white { background: #fff; }
.section-soft { background: var(--surface-soft); }
.section-dark { background: var(--brand-dark); color: #fff; }
.section-head { display: grid; gap: .55rem; max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-kicker { color: var(--brand-gold-dark); font-size: .82rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.section-title { margin: 0; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 900; color: var(--brand-dark); }
.section-dark .section-title { color: #fff; }
.section-description { margin: .3rem 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }
.section-dark .section-description { color: #cbd5e1; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.content-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.content-card:hover { transform: translateY(-7px); border-color: rgba(245,158,11,.42); box-shadow: var(--shadow-md); }
.card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #e2e8f0; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.content-card:hover .card-media img { transform: scale(1.045); }
.card-badge { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; padding: .35rem .6rem; border-radius: 999px; background: rgba(15,23,42,.86); color: #fff; font-size: .75rem; font-weight: 800; backdrop-filter: blur(8px); }
.card-body { padding: 1.35rem; }
.card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 1rem; background: #fff7ed; color: var(--brand-gold-dark); }
.card-title { margin: 0; color: var(--brand-dark); font-size: 1.25rem; line-height: 1.3; font-weight: 900; }
.card-description { margin: .7rem 0 0; color: var(--muted); line-height: 1.75; }
.card-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.05rem; color: var(--brand-gold-dark); font-weight: 900; }
.card-link .icon { transition: transform .2s ease; }
.card-link:hover .icon { transform: translateX(.25rem); }
html[dir="rtl"] .card-link:hover .icon { transform: translateX(-.25rem); }

.intro-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.intro-media { position: relative; min-height: 500px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.intro-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-content { color: var(--text); }
.rich-content { color: #334155; font-size: 1.06rem; line-height: 1.92; }
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }
.rich-content h2, .rich-content h3, .rich-content h4 { color: var(--brand-dark); line-height: 1.25; font-weight: 900; }
.rich-content h2 { margin: 2rem 0 .8rem; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.rich-content h3 { margin: 1.5rem 0 .6rem; font-size: 1.35rem; }
.rich-content ul, .rich-content ol { padding-inline-start: 1.25rem; }
.rich-content li { margin-block: .45rem; }
.rich-content a { color: var(--brand-gold-dark); text-decoration: underline; text-underline-offset: 3px; }

.trust-strip { margin-top: -34px; position: relative; z-index: 3; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 1.5rem; background: #fff; box-shadow: var(--shadow-md); }
.trust-item { display: flex; align-items: center; gap: .75rem; min-height: 96px; padding: 1rem 1.2rem; border-inline-end: 1px solid var(--line); }
.trust-item:last-child { border-inline-end: 0; }
.trust-item-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: .9rem; background: #fff7ed; color: var(--brand-gold-dark); }
.trust-item strong { display: block; color: var(--brand-dark); font-size: 1rem; }
.trust-item span { display: block; margin-top: .15rem; color: var(--muted); font-size: .86rem; }

.features-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.feature-item { display: flex; gap: .9rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.15rem; background: #fff; }
.feature-icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: .9rem; background: #ecfdf5; color: var(--brand-green); }
.feature-item h3 { margin: .1rem 0 .35rem; font-size: 1.05rem; color: var(--brand-dark); }
.feature-item p { margin: 0; color: var(--muted); line-height: 1.65; }

.process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; counter-reset: process; }
.process-card { position: relative; padding: 1.4rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1.3rem; background: rgba(255,255,255,.055); }
.process-card-number { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: .9rem; background: var(--brand-gold); color: #111827; font-weight: 900; }
.process-card h3 { margin: 0; font-size: 1.1rem; }
.process-card p { margin: .6rem 0 0; color: #cbd5e1; line-height: 1.7; }

.gallery-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; }
.gallery-item { grid-column: span 4; position: relative; min-height: 280px; overflow: hidden; border-radius: 1.35rem; background: #cbd5e1; }
.gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-column: span 8; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-overlay { position: absolute; inset: auto 0 0; padding: 3rem 1.2rem 1.2rem; color: #fff; background: linear-gradient(transparent, rgba(2,6,23,.9)); }
.gallery-overlay h3 { margin: 0; font-size: 1.18rem; }
.gallery-overlay p { margin: .3rem 0 0; color: #dbeafe; }

.faq-list { display: grid; gap: .75rem; max-width: 900px; margin-inline: auto; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 1.1rem; background: #fff; }
.faq-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: 1.15rem 1.25rem; background: transparent; color: var(--brand-dark); text-align: start; font-weight: 900; }
.faq-button .icon { transition: transform .2s ease; }
.faq-item.is-open .faq-button .icon { transform: rotate(180deg); }
.faq-panel { padding: 0 1.25rem 1.2rem; color: var(--muted); line-height: 1.8; }

.cta-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius-xl); color: #fff; background: var(--brand-dark); box-shadow: var(--shadow-lg); }
.cta-panel::before { content: ""; position: absolute; inset: -60% auto auto -8%; z-index: -1; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,.33), transparent 68%); }
.cta-panel h2 { margin: 0; font-size: clamp(1.8rem,4vw,3rem); line-height: 1.15; }
.cta-panel p { max-width: 680px; margin: .8rem 0 0; color: #cbd5e1; line-height: 1.75; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }

.contact-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 1.5rem; }
.contact-panel, .contact-form-card { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.contact-panel { color: #fff; background: var(--brand-dark); border-color: rgba(255,255,255,.1); }
.contact-panel h2, .contact-form-card h2 { margin: 0; font-size: 1.8rem; }
.contact-panel p { color: #cbd5e1; line-height: 1.75; }
.contact-details { display: grid; gap: .75rem; margin-top: 1.4rem; }
.contact-detail { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem; border-radius: 1rem; background: rgba(255,255,255,.06); }
.contact-detail-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: .8rem; background: rgba(245,158,11,.14); color: var(--brand-gold); }
.contact-detail strong { display: block; }
.contact-detail span, .contact-detail a { color: #cbd5e1; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1.4rem; }
.form-field { display: grid; gap: .4rem; }
.form-field.full { grid-column: 1/-1; }
.form-field label { color: var(--brand-dark); font-size: .9rem; font-weight: 900; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: .9rem; padding: .85rem 1rem; background: #f8fafc; color: var(--text); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--brand-gold); box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.form-consent { display: flex; align-items: flex-start; gap: .55rem; color: var(--muted); font-size: .86rem; }
.form-consent input { margin-top: .25rem; }
.form-status { min-height: 1.5rem; margin-top: .8rem; font-weight: 800; }
.form-status.is-success { color: #15803d; }
.form-status.is-error { color: #b91c1c; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding-inline: .7rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; color: var(--brand-dark); font-weight: 900; }
.pagination .current { border-color: var(--brand-gold); background: var(--brand-gold); color: #111827; }
.empty-state { padding: 3rem; border: 1px dashed #cbd5e1; border-radius: 1.5rem; text-align: center; background: #fff; }
.empty-state .icon-wrap { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 1.2rem; background: #fff7ed; color: var(--brand-gold-dark); }
.empty-state h2 { margin: 0; color: var(--brand-dark); }
.empty-state p { color: var(--muted); }

.site-footer { padding-top: clamp(3.5rem,7vw,6rem); color: #cbd5e1; background: var(--brand-dark); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 3rem; }
.footer-brand p { max-width: 420px; margin: 1rem 0; line-height: 1.8; color: #94a3b8; }
.footer-socials { display: flex; gap: .55rem; }
.footer-socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.11); border-radius: .8rem; color: #fff; background: rgba(255,255,255,.05); }
.site-footer h2 { margin: .3rem 0 1rem; color: #fff; font-size: 1rem; }
.site-footer ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.site-footer li, .site-footer li a { color: #94a3b8; }
.site-footer a:hover { color: var(--brand-gold); }
.footer-contact-list li { display: flex; align-items: flex-start; gap: .6rem; }
.footer-contact-list .icon { color: var(--brand-gold); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.09); font-size: .9rem; }
.footer-bottom p { margin: 0; }
.footer-bottom div { display: flex; gap: 1rem; }

.floating-actions { position: fixed; inset-inline-end: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 80; display: grid; gap: .65rem; }
.floating-actions a, .floating-actions button { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; color: #fff; box-shadow: 0 18px 40px -18px rgba(2,6,23,.65); }
.floating-whatsapp { background: #16a34a; }
.floating-top { visibility: hidden; opacity: 0; transform: translateY(10px); background: var(--brand-dark); transition: .2s ease; }
.floating-top.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }

[data-reveal] { opacity: 1; transform: none; }
[data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

@media (max-width: 1080px) {
    .desktop-nav { display: none; }
    .mobile-menu-button { display: grid; }
    .mobile-navigation.is-open { display: block; }
    .header-call span, .language-trigger span { display: none; }
    .header-call { width: 44px; min-height: 44px; padding: 0; }
    .language-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; }
    .language-trigger .icon-sm { display: none; }
    .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .trust-item:nth-child(2) { border-inline-end: 0; }
    .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
    :root { --shell: min(100% - 1.1rem, 1180px); --header-height: 70px; }
    .brand-name { font-size: 1.2rem; }
    .header-actions { gap: .35rem; }
    .language-menu { display: none; }
    .page-hero { min-height: 480px; }
    .page-hero-content { padding-block: 4.3rem; }
    .page-title { font-size: clamp(2.15rem, 11vw, 3.6rem); }
    .page-lead { font-size: 1rem; line-height: 1.7; }
    .hero-actions, .cta-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .button { width: 100%; }
    .section { padding-block: 4rem; }
    .card-grid, .features-grid, .contact-layout, .form-grid, .footer-grid, .process-grid { grid-template-columns: 1fr; }
    .intro-layout { grid-template-columns: 1fr; }
    .intro-media { min-height: 350px; order: -1; }
    .trust-strip { margin-top: -22px; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-item { border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .trust-item:last-child { border-bottom: 0; }
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-item, .gallery-item:nth-child(1), .gallery-item:nth-child(5) { grid-column: 1; min-height: 250px; }
    .cta-panel { grid-template-columns: 1fr; }
    .cta-actions { justify-content: stretch; }
    .footer-bottom { align-items: flex-start; flex-direction: column; }
    .form-field.full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ========================================================================== */
/* GRANDMASTER MULTI-PAGE DESIGN SYSTEM — HOMEPAGE VISUAL PARITY              */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 01. GLOBAL FLUID SCALE, TOKENS, RENDERING, ACCESSIBILITY                    */
/* -------------------------------------------------------------------------- */

:root {
    --brand-gold-soft: #fbbf24;
    --brand-gold-pale: #fef3c7;
    --brand-gold-mist: #fff7ed;
    --brand-slate-950: #020617;
    --brand-slate-900: #0f172a;
    --brand-slate-850: #131d33;
    --brand-slate-800: #1e293b;
    --brand-slate-700: #334155;
    --brand-slate-600: #475569;
    --brand-slate-500: #64748b;
    --brand-slate-400: #94a3b8;
    --brand-slate-300: #cbd5e1;
    --brand-slate-200: #e2e8f0;
    --brand-slate-100: #f1f5f9;
    --brand-slate-50: #f8fafc;

    --fluid-2xs: clamp(.68rem, .62rem + .18vw, .78rem);
    --fluid-xs: clamp(.76rem, .7rem + .22vw, .88rem);
    --fluid-sm: clamp(.86rem, .78rem + .26vw, .98rem);
    --fluid-base: clamp(.96rem, .88rem + .3vw, 1.08rem);
    --fluid-lg: clamp(1.05rem, .96rem + .4vw, 1.24rem);
    --fluid-xl: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
    --fluid-2xl: clamp(1.55rem, 1.2rem + 1.3vw, 2.2rem);
    --fluid-3xl: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
    --fluid-4xl: clamp(2.55rem, 1.7rem + 3.7vw, 5rem);

    --space-2xs: clamp(.3rem, .25rem + .18vw, .45rem);
    --space-xs: clamp(.5rem, .4rem + .3vw, .75rem);
    --space-sm: clamp(.75rem, .62rem + .42vw, 1rem);
    --space-md: clamp(1rem, .8rem + .65vw, 1.45rem);
    --space-lg: clamp(1.4rem, 1.05rem + 1.1vw, 2.1rem);
    --space-xl: clamp(2rem, 1.4rem + 2vw, 3.4rem);
    --space-2xl: clamp(3rem, 2rem + 3.4vw, 5.8rem);
    --space-3xl: clamp(4.2rem, 2.8rem + 4.8vw, 8rem);

    --radius-2xs: clamp(.55rem, .45rem + .2vw, .72rem);
    --radius-xs: clamp(.72rem, .58rem + .28vw, .92rem);
    --radius-fluid: clamp(1rem, .75rem + .55vw, 1.45rem);
    --radius-fluid-lg: clamp(1.4rem, 1rem + .9vw, 2.1rem);
    --radius-fluid-xl: clamp(1.8rem, 1.3rem + 1.25vw, 2.8rem);

    --shadow-gold-sm: 0 14px 34px -22px rgba(245, 158, 11, .82);
    --shadow-gold-md: 0 26px 62px -32px rgba(245, 158, 11, .7);
    --shadow-slate-sm: 0 20px 45px -34px rgba(2, 6, 23, .46);
    --shadow-slate-md: 0 34px 82px -46px rgba(2, 6, 23, .58);
    --shadow-slate-lg: 0 48px 120px -58px rgba(2, 6, 23, .72);

    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --header-height-expanded: clamp(4.7rem, 6.2vw, 6rem);
    --header-height-compact: clamp(3.9rem, 5vw, 4.5rem);
}

html {
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

body.site-body {
    position: relative;
    isolation: isolate;
    min-width: 320px;
    background:
        radial-gradient(circle at 8% 0%, rgba(245, 158, 11, .035), transparent 24rem),
        var(--surface-soft);
}

body.site-body::selection,
body.site-body *::selection {
    color: #111827;
    background: rgba(251, 191, 36, .58);
}

body.site-body::-webkit-scrollbar {
    width: 10px;
}

body.site-body::-webkit-scrollbar-track {
    background: var(--brand-slate-950);
}

body.site-body::-webkit-scrollbar-thumb {
    border: 2px solid var(--brand-slate-950);
    border-radius: 999px;
    background: linear-gradient(var(--brand-gold-soft), var(--brand-gold-dark));
}

.site-body :focus-visible {
    outline: 3px solid rgba(245, 158, 11, .65);
    outline-offset: 3px;
}

.site-body img {
    color: transparent;
}

.site-body button,
.site-body a,
.site-body input,
.site-body textarea,
.site-body select {
    -webkit-tap-highlight-color: transparent;
}


.site-ambient {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}

.site-ambient-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(6px);
    opacity: .5;
}

.site-ambient-orb-one {
    inset-block-start: 14vh;
    inset-inline-start: -12rem;
    width: clamp(18rem, 34vw, 34rem);
    height: clamp(18rem, 34vw, 34rem);
    background: radial-gradient(circle, rgba(245, 158, 11, .08), transparent 68%);
}

.site-ambient-orb-two {
    inset-block-start: 58vh;
    inset-inline-end: -14rem;
    width: clamp(20rem, 38vw, 40rem);
    height: clamp(20rem, 38vw, 40rem);
    background: radial-gradient(circle, rgba(15, 23, 42, .09), transparent 70%);
}

.site-ambient-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 75%, transparent);
}

/* -------------------------------------------------------------------------- */
/* 02. HEADER — HOMEPAGE GLASS PARITY                                          */
/* -------------------------------------------------------------------------- */

.site-header {
    height: var(--header-height-expanded);
    background:
        linear-gradient(90deg, rgba(2, 6, 23, .94), rgba(15, 23, 42, .84), rgba(2, 6, 23, .94));
    border-bottom-color: rgba(255, 255, 255, .085);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
    transition:
        height .38s var(--ease-standard),
        background .38s var(--ease-standard),
        box-shadow .38s var(--ease-standard),
        border-color .38s var(--ease-standard);
}

.site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    opacity: .35;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, .5), transparent);
}

.site-header.is-scrolled {
    height: var(--header-height-compact);
    background: rgba(2, 6, 23, .965);
    border-bottom-color: rgba(245, 158, 11, .13);
    box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .95);
}

.site-header-glow {
    position: absolute;
    inset-block-start: -9rem;
    inset-inline-start: 14%;
    width: 22rem;
    height: 14rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(245, 158, 11, .105), transparent 70%);
}

.header-inner {
    position: relative;
    gap: clamp(.75rem, 1.8vw, 1.5rem);
}

.brand {
    position: relative;
    z-index: 2;
    gap: clamp(.5rem, 1vw, .75rem);
}

.brand-icon {
    position: relative;
    width: clamp(2.25rem, 3.5vw, 2.8rem);
    height: clamp(2.25rem, 3.5vw, 2.8rem);
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: clamp(.72rem, 1vw, .9rem);
    background: linear-gradient(145deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .04));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 14px 30px -22px rgba(245, 158, 11, .9);
}

.brand-icon-ring {
    position: absolute;
    inset: -.32rem;
    z-index: -1;
    border: 1px solid rgba(245, 158, 11, .1);
    border-radius: inherit;
}

.brand-copy {
    display: grid;
    gap: .26rem;
}

.brand-name {
    font-size: clamp(1.08rem, 1.1rem + .55vw, 1.72rem);
    line-height: 1;
    letter-spacing: .015em;
    text-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

.brand-line {
    width: min(5.5rem, 70%);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-gold), transparent);
}

html[dir="rtl"] .brand-line {
    background: linear-gradient(270deg, var(--brand-gold), transparent);
}

.site-header.is-scrolled .brand-icon {
    transform: scale(.9);
}

.site-header.is-scrolled .brand-name {
    transform: translateY(1px) scale(.96);
    transform-origin: center right;
}

.desktop-nav {
    gap: clamp(.55rem, 1.2vw, 1.25rem);
}

.desktop-nav > a,
.nav-dropdown-trigger {
    position: relative;
    isolation: isolate;
    padding: .76rem .28rem;
    color: rgba(226, 232, 240, .88);
    font-size: clamp(.82rem, .72rem + .2vw, .96rem);
    font-weight: 700;
}

.desktop-nav > a::after,
.nav-dropdown-trigger::after {
    content: "";
    position: absolute;
    inset: auto 50% .3rem;
    z-index: -1;
    width: 0;
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--brand-gold-dark), var(--brand-gold-soft));
    transition: width .25s var(--ease-standard);
}

.desktop-nav > a:hover::after,
.desktop-nav > a:focus-visible::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger:focus-visible::after,
.nav-dropdown-trigger[aria-expanded="true"]::after {
    width: 74%;
}

.nav-dropdown-trigger .icon {
    transition: transform .22s var(--ease-standard);
}

.nav-dropdown-trigger[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.mega-menu {
    width: min(900px, 88vw);
    padding: clamp(1rem, 1.8vw, 1.5rem);
    border-color: rgba(255, 255, 255, .11);
    border-radius: var(--radius-fluid-lg);
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .99), rgba(2, 6, 23, .99));
    box-shadow:
        0 46px 120px -42px rgba(0, 0, 0, .94),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.mega-menu::before {
    content: "";
    position: absolute;
    inset: -.55rem 0 auto;
    height: .75rem;
}

.mega-menu-glow {
    position: absolute;
    inset: -9rem auto auto 5%;
    width: 20rem;
    height: 18rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(245, 158, 11, .16), transparent 68%);
}

.mega-menu-head {
    position: relative;
    padding: .4rem .45rem 1.15rem;
}

.mega-menu-head strong {
    font-size: var(--fluid-xl);
}

.mega-menu-head > a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.mega-menu-grid {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.48rem, .9vw, .75rem);
}

.mega-service {
    position: relative;
    min-height: clamp(3.9rem, 5vw, 4.7rem);
    padding: clamp(.65rem, 1.1vw, .9rem);
    border: 1px solid transparent;
    border-radius: clamp(.85rem, 1vw, 1.05rem);
    background: rgba(255, 255, 255, .025);
}

.mega-service:hover {
    border-color: rgba(245, 158, 11, .2);
    background:
        linear-gradient(135deg, rgba(245, 158, 11, .115), rgba(255, 255, 255, .025));
}

.mega-service-icon {
    width: clamp(2.2rem, 3vw, 2.65rem);
    height: clamp(2.2rem, 3vw, 2.65rem);
    border: 1px solid rgba(245, 158, 11, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.mega-service-copy {
    min-width: 0;
    flex: 1;
}

.mega-service-copy strong {
    display: block;
    overflow: hidden;
    color: #f8fafc;
    font-size: var(--fluid-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-service-copy > span {
    display: block;
    width: 2.5rem;
    height: 1px;
    margin-top: .35rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, .65), transparent);
}

html[dir="rtl"] .mega-service-copy > span {
    background: linear-gradient(270deg, rgba(245, 158, 11, .65), transparent);
}

.mega-service-arrow {
    color: rgba(251, 191, 36, .7);
    opacity: 0;
    transform: translateX(.4rem);
    transition: opacity .2s ease, transform .2s ease;
}

.mega-service:hover .mega-service-arrow {
    opacity: 1;
    transform: none;
}

.language-trigger {
    min-height: clamp(2.6rem, 3.5vw, 2.9rem);
    padding-inline: clamp(.65rem, 1vw, .9rem);
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.language-popover {
    min-width: 170px;
    border-color: rgba(255, 255, 255, .12);
    background: rgba(15, 23, 42, .985);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.language-popover a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.header-call {
    min-height: clamp(2.7rem, 3.7vw, 3rem);
    padding-inline: clamp(.85rem, 1.4vw, 1.2rem);
    background: linear-gradient(135deg, var(--brand-gold-soft), var(--brand-gold-dark));
    box-shadow:
        0 18px 38px -22px rgba(245, 158, 11, .95),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.header-call-icon {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
}

.mobile-menu-button {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}

.mobile-menu-button::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    background: rgba(245, 158, 11, .18);
    transition: transform .22s ease;
}

.mobile-menu-button[aria-expanded="true"]::after {
    transform: none;
}

.mobile-menu-button .icon {
    position: relative;
    z-index: 1;
}

.mobile-navigation {
    top: var(--header-height-expanded);
    inset-block-start: var(--header-height-expanded);
    background: rgba(2, 6, 23, .99);
}

.site-header.is-scrolled .mobile-navigation {
    top: var(--header-height-compact);
    inset-block-start: var(--header-height-compact);
}

.mobile-navigation-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 10%, rgba(245, 158, 11, .14), transparent 22rem),
        linear-gradient(rgba(2, 6, 23, .94), rgba(2, 6, 23, .99));
}

.mobile-navigation-inner {
    position: relative;
    z-index: 1;
    gap: .4rem;
    padding-block: 1rem max(2rem, env(safe-area-inset-bottom));
}

.mobile-navigation-head {
    display: none;
    align-items: center;
    gap: .75rem;
    margin-bottom: .55rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .035);
}

.mobile-navigation-head strong {
    color: #fff;
    font-size: var(--fluid-lg);
}

.mobile-navigation a,
.mobile-navigation summary {
    border: 1px solid transparent;
    font-size: var(--fluid-base);
}

.mobile-navigation a:active,
.mobile-navigation summary:active {
    border-color: rgba(245, 158, 11, .2);
    background: rgba(245, 158, 11, .08);
}

.mobile-navigation details[open] > summary {
    color: var(--brand-gold-soft);
    background: rgba(255, 255, 255, .04);
}

.mobile-navigation details[open] > summary .icon {
    transform: rotate(180deg);
}

.mobile-service-list {
    margin-block: .25rem .6rem;
    border-inline-start-color: rgba(245, 158, 11, .5);
}

/* -------------------------------------------------------------------------- */
/* 03. CINEMATIC PAGE HERO — DESKTOP MOTION, MOBILE CALM                      */
/* -------------------------------------------------------------------------- */

.page-main {
    position: relative;
    min-height: 72vh;
    padding-top: var(--header-height-expanded);
}

.site-header.is-scrolled ~ .page-main {
    /* The fixed header does not affect document flow; the original padding remains stable. */
}

.page-hero {
    min-height: clamp(31rem, 66vw, 46rem);
    background: var(--brand-slate-950);
}

.page-hero::before {
    background:
        linear-gradient(110deg, rgba(2, 6, 23, .985) 11%, rgba(15, 23, 42, .89) 50%, rgba(15, 23, 42, .5)),
        linear-gradient(180deg, rgba(2, 6, 23, .18), rgba(2, 6, 23, .45));
}

html[dir="rtl"] .page-hero::before {
    background:
        linear-gradient(250deg, rgba(2, 6, 23, .985) 11%, rgba(15, 23, 42, .89) 50%, rgba(15, 23, 42, .5)),
        linear-gradient(180deg, rgba(2, 6, 23, .18), rgba(2, 6, 23, .45));
}

.page-hero::after {
    inset: auto -10% -58% 32%;
    width: min(48rem, 78vw);
    height: min(48rem, 78vw);
    filter: blur(10px);
    opacity: .9;
    background:
        radial-gradient(circle, rgba(245, 158, 11, .24) 0, rgba(245, 158, 11, .06) 34%, transparent 68%);
}

.page-hero-image {
    transform: scale(1.035);
    filter: saturate(.9) contrast(1.03);
    will-change: transform;
}

.page-hero-content {
    position: relative;
    z-index: 3;
    max-width: min(58rem, 88vw);
    padding-block: clamp(5.5rem, 11vw, 9rem);
}

.page-hero-content::before {
    content: "";
    position: absolute;
    inset-block-start: 18%;
    inset-inline-start: -2rem;
    width: 1px;
    height: 56%;
    opacity: .6;
    background: linear-gradient(transparent, var(--brand-gold), transparent);
}

.breadcrumbs {
    width: fit-content;
    max-width: 100%;
    margin-bottom: clamp(1rem, 2vw, 1.35rem);
    padding: .4rem .65rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    color: rgba(226, 232, 240, .85);
    background: rgba(2, 6, 23, .22);
    font-size: var(--fluid-xs);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-badge {
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(.9rem, 1.6vw, 1.15rem);
    padding: clamp(.43rem, .7vw, .58rem) clamp(.72rem, 1.2vw, .95rem);
    border-color: rgba(245, 158, 11, .42);
    background: rgba(245, 158, 11, .09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 18px 40px -30px rgba(245, 158, 11, .75);
    font-size: var(--fluid-xs);
    letter-spacing: .025em;
}

.page-badge::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -120%;
    width: 80%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}

.page-title {
    max-width: 18ch;
    font-size: var(--fluid-4xl);
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

.page-title::first-line {
    color: #fff;
}

.page-lead {
    max-width: 46rem;
    margin-top: clamp(1rem, 2vw, 1.45rem);
    color: rgba(226, 232, 240, .9);
    font-size: var(--fluid-lg);
    line-height: 1.78;
    text-wrap: pretty;
}

.hero-actions {
    gap: clamp(.65rem, 1.2vw, .9rem);
    margin-top: clamp(1.4rem, 2.6vw, 2rem);
}

.button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(3rem, 4vw, 3.35rem);
    padding: clamp(.72rem, 1vw, .9rem) clamp(1rem, 1.8vw, 1.45rem);
    border-radius: 999px;
    font-size: var(--fluid-sm);
    letter-spacing: .01em;
}

.button::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -120%;
    z-index: -1;
    width: 70%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .23), transparent);
}

.button-primary {
    background: linear-gradient(135deg, var(--brand-gold-soft), var(--brand-gold-dark));
    box-shadow:
        var(--shadow-gold-sm),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

.button-secondary {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.button-outline {
    border-color: rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-slate-sm);
}

.button-dark {
    background: linear-gradient(135deg, var(--brand-slate-800), var(--brand-slate-950));
    box-shadow: var(--shadow-slate-sm);
}

/* -------------------------------------------------------------------------- */
/* 04. SECTIONS, TYPOGRAPHY, LAYOUT FLOW                                       */
/* -------------------------------------------------------------------------- */

.section {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: var(--space-3xl);
}

.section-white {
    background:
        radial-gradient(circle at 92% 8%, rgba(245, 158, 11, .035), transparent 22rem),
        #fff;
}

.section-soft {
    background:
        radial-gradient(circle at 8% 12%, rgba(245, 158, 11, .045), transparent 22rem),
        linear-gradient(180deg, #f8fafc, #f1f5f9 55%, #f8fafc);
}

.section-dark {
    background:
        radial-gradient(circle at 14% 0%, rgba(245, 158, 11, .12), transparent 26rem),
        radial-gradient(circle at 88% 100%, rgba(51, 65, 85, .34), transparent 30rem),
        var(--brand-slate-900);
}

.section-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.section-head {
    gap: clamp(.45rem, .9vw, .7rem);
    max-width: min(50rem, 100%);
    margin-bottom: var(--space-xl);
}

.section-head.center {
    max-width: min(53rem, 100%);
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: .55rem;
    color: var(--brand-gold-dark);
    font-size: var(--fluid-xs);
    letter-spacing: .15em;
}

.section-kicker::before {
    content: "";
    width: clamp(1.75rem, 4vw, 3.25rem);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-gold-dark), rgba(245, 158, 11, .12));
}

html[dir="rtl"] .section-kicker::before {
    background: linear-gradient(270deg, var(--brand-gold-dark), rgba(245, 158, 11, .12));
}

.section-head.center .section-kicker {
    margin-inline: auto;
}

.section-title {
    font-size: var(--fluid-3xl);
    line-height: 1.12;
    letter-spacing: -.032em;
    text-wrap: balance;
}

.section-description {
    max-width: 47rem;
    color: var(--brand-slate-500);
    font-size: var(--fluid-base);
    line-height: 1.86;
    text-wrap: pretty;
}

.section-head.center .section-description {
    margin-inline: auto;
}

.intro-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(clamp(17rem, 32vw, 25rem), .92fr);
    gap: clamp(2rem, 6vw, 5.8rem);
}

.intro-layout:nth-child(even) .intro-media {
    transform-origin: center;
}

.intro-media {
    min-height: clamp(22rem, 52vw, 37rem);
    border: clamp(4px, .6vw, 7px) solid rgba(255, 255, 255, .9);
    border-radius: var(--radius-fluid-xl);
    background: var(--brand-slate-200);
    box-shadow:
        var(--shadow-slate-lg),
        0 0 0 1px rgba(15, 23, 42, .06);
}

.intro-media::before {
    content: "";
    position: absolute;
    inset: -1.3rem;
    z-index: -1;
    border-radius: inherit;
    transform: rotate(2.5deg);
    background: linear-gradient(135deg, rgba(245, 158, 11, .2), rgba(245, 158, 11, .025));
}

html[dir="rtl"] .intro-media::before {
    transform: rotate(-2.5deg);
}

.intro-media::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 38%;
    height: 38%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(245, 158, 11, .2), transparent 72%);
    mix-blend-mode: screen;
}

.intro-media img {
    border-radius: calc(var(--radius-fluid-xl) - .35rem);
    transition: transform .8s var(--ease-standard), filter .8s var(--ease-standard);
}

.rich-content {
    color: var(--brand-slate-700);
    font-size: var(--fluid-base);
    line-height: 1.95;
    text-wrap: pretty;
}

.rich-content p {
    margin-block: 0 1.2em;
}

.rich-content h2,
.rich-content h3,
.rich-content h4 {
    position: relative;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.rich-content h2 {
    margin-block: 2.1em .75em;
    padding-inline-start: clamp(.8rem, 1.4vw, 1.1rem);
    font-size: clamp(1.55rem, 1.18rem + 1.5vw, 2.45rem);
}

.rich-content h2::before {
    content: "";
    position: absolute;
    inset-block: .18em .1em;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(var(--brand-gold-soft), var(--brand-gold-dark));
}

.rich-content h3 {
    margin-block: 1.75em .65em;
    font-size: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
}

.rich-content h4 {
    font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
}

.rich-content ul,
.rich-content ol {
    margin-block: 1rem 1.4rem;
    padding-inline-start: 1.4rem;
}

.rich-content li {
    position: relative;
    margin-block: .55rem;
    padding-inline-start: .15rem;
}

.rich-content ul li::marker {
    color: var(--brand-gold-dark);
}

.rich-content ol li::marker {
    color: var(--brand-gold-dark);
    font-weight: 900;
}

.rich-content blockquote {
    margin: var(--space-lg) 0;
    padding: clamp(1rem, 2.3vw, 1.5rem);
    border: 1px solid rgba(245, 158, 11, .24);
    border-inline-start: 4px solid var(--brand-gold);
    border-radius: var(--radius-fluid);
    color: var(--brand-slate-700);
    background: linear-gradient(135deg, rgba(255, 247, 237, .9), rgba(255, 255, 255, .98));
    box-shadow: var(--shadow-slate-sm);
}

.rich-content table {
    width: 100%;
    margin-block: var(--space-lg);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--brand-slate-200);
    border-radius: var(--radius-fluid);
    background: #fff;
    box-shadow: var(--shadow-slate-sm);
}

.rich-content th,
.rich-content td {
    padding: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 1px solid var(--brand-slate-200);
    text-align: start;
}

.rich-content th {
    color: var(--brand-slate-900);
    background: var(--brand-slate-100);
    font-weight: 900;
}

.rich-content tr:last-child td {
    border-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* 05. TRUST STRIP                                                            */
/* -------------------------------------------------------------------------- */

.trust-strip {
    margin-top: clamp(-2.4rem, -3.5vw, -1.7rem);
    z-index: 8;
}

.trust-grid {
    border-color: rgba(15, 23, 42, .1);
    border-radius: var(--radius-fluid-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .985), rgba(248, 250, 252, .965));
    box-shadow:
        0 30px 80px -46px rgba(2, 6, 23, .62),
        inset 0 1px 0 rgba(255, 255, 255, .96);
}

.trust-item {
    position: relative;
    min-height: clamp(5.8rem, 8vw, 7rem);
    padding: clamp(.85rem, 1.7vw, 1.25rem);
    background: transparent;
}

.trust-item::after {
    content: "";
    position: absolute;
    inset: auto 14% .55rem;
    height: 2px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
    transition: opacity .25s ease;
}

.trust-item-icon {
    width: clamp(2.65rem, 4vw, 3rem);
    height: clamp(2.65rem, 4vw, 3rem);
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: clamp(.8rem, 1.1vw, 1rem);
    background: linear-gradient(145deg, #fff7ed, #fffbeb);
    box-shadow: 0 16px 32px -24px rgba(245, 158, 11, .82);
}

.trust-item strong {
    font-size: var(--fluid-sm);
}

.trust-item span {
    font-size: var(--fluid-xs);
    line-height: 1.45;
}

/* -------------------------------------------------------------------------- */
/* 06. CONTENT CARDS, SERVICE CARDS, PROJECT CARDS                            */
/* -------------------------------------------------------------------------- */

.card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.5rem);
}

.content-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(15, 23, 42, .095);
    border-radius: var(--radius-fluid-lg);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, .96));
    box-shadow:
        0 20px 46px -38px rgba(15, 23, 42, .52),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.content-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(245, 158, 11, .14), transparent 34%);
    transition: opacity .28s ease;
}

.content-card::after {
    content: "";
    position: absolute;
    inset: auto 1.25rem 0;
    z-index: 2;
    height: 3px;
    border-radius: 999px 999px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
    transition: transform .35s var(--ease-standard);
}

.card-media {
    aspect-ratio: 16 / 10;
}

.card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 56%, rgba(2, 6, 23, .22)),
        linear-gradient(110deg, rgba(245, 158, 11, .05), transparent 44%);
}

.card-media img {
    transform: scale(1.005);
    filter: saturate(.94) contrast(1.02);
}

.card-badge {
    z-index: 2;
    padding: .42rem .68rem;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(2, 6, 23, .76);
    box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .8);
    font-size: var(--fluid-2xs);
}

.card-body {
    position: relative;
    padding: clamp(1.05rem, 2.2vw, 1.55rem);
}

.card-icon {
    position: relative;
    width: clamp(3rem, 4.5vw, 3.55rem);
    height: clamp(3rem, 4.5vw, 3.55rem);
    margin-top: clamp(-2.1rem, -3vw, -1.4rem);
    margin-bottom: clamp(.85rem, 1.5vw, 1.05rem);
    border: 4px solid #fff;
    border-radius: clamp(.9rem, 1.3vw, 1.15rem);
    background: linear-gradient(145deg, #fff7ed, #fef3c7);
    box-shadow:
        0 18px 38px -28px rgba(245, 158, 11, .95),
        0 0 0 1px rgba(245, 158, 11, .1);
}

.content-card:not(:has(.card-media)) .card-icon {
    margin-top: 0;
}

.card-title {
    font-size: clamp(1.12rem, .98rem + .65vw, 1.45rem);
    letter-spacing: -.018em;
    text-wrap: balance;
}

.card-description {
    color: var(--brand-slate-500);
    font-size: var(--fluid-sm);
    line-height: 1.8;
    text-wrap: pretty;
}

.card-link {
    position: relative;
    gap: .45rem;
    margin-top: clamp(.9rem, 1.5vw, 1.15rem);
    font-size: var(--fluid-sm);
}

.card-link::after {
    content: "";
    position: absolute;
    inset: auto 0 -.24rem;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--brand-gold-dark);
    transition: width .25s ease;
}

.card-link:hover::after {
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* 07. FEATURE CARDS AND PROCESS                                               */
/* -------------------------------------------------------------------------- */

.features-grid {
    gap: clamp(.75rem, 1.5vw, 1.1rem);
}

.feature-item {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 1.8vw, 1.3rem);
    border-color: rgba(15, 23, 42, .09);
    border-radius: var(--radius-fluid);
    background: linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 18px 42px -36px rgba(15, 23, 42, .5);
}

.feature-item::after {
    content: "";
    position: absolute;
    inset: auto -3rem -4rem auto;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 163, 74, .09), transparent 68%);
}

.feature-icon {
    position: relative;
    z-index: 1;
    width: clamp(2.6rem, 3.8vw, 3rem);
    height: clamp(2.6rem, 3.8vw, 3rem);
    border: 1px solid rgba(22, 163, 74, .13);
    background: linear-gradient(145deg, #ecfdf5, #f0fdf4);
}

.feature-item h3 {
    font-size: var(--fluid-base);
}

.feature-item p {
    font-size: var(--fluid-sm);
    line-height: 1.72;
}

.process-grid {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.8rem, 1.7vw, 1.2rem);
}

.process-grid::before {
    content: "";
    position: absolute;
    inset-block-start: 2.9rem;
    inset-inline: 5% 5%;
    height: 1px;
    opacity: .5;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, .62), transparent);
}

.process-card {
    position: relative;
    z-index: 1;
    min-height: clamp(13rem, 18vw, 16rem);
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border-color: rgba(255, 255, 255, .115);
    border-radius: var(--radius-fluid-lg);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 24px 58px -42px rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.process-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at 20% 0%, rgba(245, 158, 11, .16), transparent 52%);
    transition: opacity .25s ease;
}

.process-card-number {
    position: relative;
    z-index: 1;
    width: clamp(2.7rem, 4vw, 3.2rem);
    height: clamp(2.7rem, 4vw, 3.2rem);
    border: 4px solid rgba(15, 23, 42, .9);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand-gold-soft), var(--brand-gold-dark));
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, .6),
        0 0 24px rgba(245, 158, 11, .22);
}

.process-card h3,
.process-card p {
    position: relative;
    z-index: 1;
}

.process-card h3 {
    font-size: var(--fluid-lg);
    text-wrap: balance;
}

.process-card p {
    font-size: var(--fluid-sm);
    line-height: 1.78;
}

/* -------------------------------------------------------------------------- */
/* 08. GALLERY AND LIGHTBOX                                                    */
/* -------------------------------------------------------------------------- */

.gallery-grid {
    gap: clamp(.75rem, 1.5vw, 1.1rem);
}

.gallery-item {
    min-height: clamp(17rem, 31vw, 25rem);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--radius-fluid-lg);
    box-shadow: var(--shadow-slate-sm);
    cursor: zoom-in;
}

.gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: linear-gradient(135deg, rgba(245, 158, 11, .16), transparent 45%);
    transition: opacity .3s ease;
}

.gallery-item img {
    transition: transform .7s var(--ease-standard), filter .7s var(--ease-standard);
}

.gallery-overlay {
    z-index: 2;
    padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.4rem);
    background: linear-gradient(transparent, rgba(2, 6, 23, .93));
}

.gallery-overlay h3 {
    font-size: var(--fluid-lg);
    text-wrap: balance;
}

.gallery-overlay p {
    font-size: var(--fluid-sm);
    line-height: 1.6;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: clamp(.8rem, 2vw, 1.5rem);
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(2, 6, 23, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.image-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    max-height: 92vh;
    padding: clamp(.5rem, 1vw, .8rem);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-fluid-lg);
    background: rgba(15, 23, 42, .95);
    box-shadow: 0 50px 160px -50px rgba(0, 0, 0, .95);
}

.image-lightbox-dialog img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: calc(var(--radius-fluid-lg) - .35rem);
    background: #020617;
}

.image-lightbox-dialog p {
    margin: .7rem .5rem .25rem;
    color: #cbd5e1;
    font-size: var(--fluid-sm);
    text-align: center;
}

.image-lightbox-close {
    position: absolute;
    inset-block-start: .85rem;
    inset-inline-end: .85rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    color: #fff;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------------------- */
/* 09. FAQ                                                                    */
/* -------------------------------------------------------------------------- */

.faq-list {
    gap: clamp(.65rem, 1.4vw, .95rem);
    max-width: min(59rem, 100%);
}

.faq-item {
    position: relative;
    border-color: rgba(15, 23, 42, .09);
    border-radius: var(--radius-fluid);
    background: linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 16px 44px -38px rgba(15, 23, 42, .55);
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.faq-item::before {
    content: "";
    position: absolute;
    inset-block: .75rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(var(--brand-gold-soft), var(--brand-gold-dark));
    transition: opacity .25s ease;
}

.faq-item.is-open {
    border-color: rgba(245, 158, 11, .3);
    box-shadow: 0 26px 68px -44px rgba(245, 158, 11, .4);
}

.faq-item.is-open::before {
    opacity: 1;
}

.faq-button {
    min-height: clamp(3.8rem, 6vw, 4.7rem);
    padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2.2vw, 1.45rem);
    font-size: var(--fluid-base);
    line-height: 1.5;
}

.faq-button .icon {
    width: clamp(1.1rem, 2vw, 1.35rem);
    height: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--brand-gold-dark);
}

.faq-panel {
    padding: 0 clamp(1rem, 2.2vw, 1.45rem) clamp(1.1rem, 2vw, 1.4rem);
    color: var(--brand-slate-600);
    font-size: var(--fluid-sm);
    line-height: 1.9;
}

/* -------------------------------------------------------------------------- */
/* 10. CTA PANEL                                                              */
/* -------------------------------------------------------------------------- */

.cta-panel {
    min-height: clamp(15rem, 27vw, 22rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.7rem, 5vw, 4.5rem);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-fluid-xl);
    background:
        radial-gradient(circle at 7% 0%, rgba(245, 158, 11, .22), transparent 24rem),
        radial-gradient(circle at 94% 100%, rgba(51, 65, 85, .5), transparent 24rem),
        linear-gradient(145deg, var(--brand-slate-900), var(--brand-slate-950));
    box-shadow:
        var(--shadow-slate-lg),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.cta-panel::before {
    inset: -60% auto auto -12%;
    width: clamp(20rem, 36vw, 34rem);
    height: clamp(20rem, 36vw, 34rem);
    background: radial-gradient(circle, rgba(245, 158, 11, .3), transparent 68%);
}

.cta-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}

.cta-panel h2 {
    max-width: 18ch;
    font-size: var(--fluid-3xl);
    text-wrap: balance;
}

.cta-panel p {
    max-width: 44rem;
    font-size: var(--fluid-base);
    line-height: 1.85;
}

.cta-actions {
    min-width: min(100%, 15rem);
}

/* -------------------------------------------------------------------------- */
/* 11. CONTACT PAGE AND FORMS                                                 */
/* -------------------------------------------------------------------------- */

.contact-layout {
    grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.18fr);
    gap: clamp(1rem, 2.5vw, 1.8rem);
    align-items: stretch;
}

.contact-panel,
.contact-form-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.35rem);
    border-radius: var(--radius-fluid-lg);
    box-shadow: var(--shadow-slate-md);
}

.contact-panel {
    border-color: rgba(255, 255, 255, .1);
    background:
        radial-gradient(circle at 0 0, rgba(245, 158, 11, .2), transparent 18rem),
        linear-gradient(145deg, var(--brand-slate-900), var(--brand-slate-950));
}

.contact-panel::after {
    content: "";
    position: absolute;
    inset: auto -7rem -7rem auto;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .11), transparent 70%);
}

.contact-panel h2,
.contact-form-card h2 {
    font-size: var(--fluid-2xl);
    line-height: 1.2;
    text-wrap: balance;
}

.contact-panel p,
.contact-form-card > p {
    font-size: var(--fluid-sm);
    line-height: 1.82;
}

.contact-details {
    position: relative;
    z-index: 1;
    gap: clamp(.6rem, 1.2vw, .85rem);
}

.contact-detail {
    padding: clamp(.75rem, 1.5vw, 1rem);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-fluid);
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.contact-detail-icon {
    width: clamp(2.5rem, 3.7vw, 2.9rem);
    height: clamp(2.5rem, 3.7vw, 2.9rem);
    border: 1px solid rgba(245, 158, 11, .16);
    background: rgba(245, 158, 11, .105);
}

.contact-detail strong {
    font-size: var(--fluid-sm);
}

.contact-detail span,
.contact-detail a {
    font-size: var(--fluid-xs);
    line-height: 1.6;
}

.contact-form-card {
    border-color: rgba(15, 23, 42, .09);
    background:
        radial-gradient(circle at 100% 0, rgba(245, 158, 11, .055), transparent 17rem),
        #fff;
}

.form-grid {
    gap: clamp(.8rem, 1.6vw, 1.1rem);
    margin-top: clamp(1.1rem, 2vw, 1.5rem);
}

.form-field {
    gap: .48rem;
}

.form-field label {
    color: var(--brand-slate-800);
    font-size: var(--fluid-xs);
}

.form-field input,
.form-field select,
.form-field textarea {
    min-height: clamp(3rem, 4.2vw, 3.3rem);
    padding: clamp(.78rem, 1.3vw, .95rem) clamp(.9rem, 1.4vw, 1.05rem);
    border-color: rgba(15, 23, 42, .12);
    border-radius: var(--radius-xs);
    background: linear-gradient(145deg, #f8fafc, #fff);
    font-size: var(--fluid-sm);
}

.form-field textarea {
    min-height: clamp(9rem, 18vw, 12rem);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(245, 158, 11, .11),
        0 18px 38px -32px rgba(15, 23, 42, .45);
}

.form-consent {
    padding: .75rem .85rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--radius-xs);
    background: var(--brand-slate-50);
    font-size: var(--fluid-xs);
    line-height: 1.55;
}

.form-consent input {
    accent-color: var(--brand-gold-dark);
}

.form-status {
    font-size: var(--fluid-sm);
}

/* -------------------------------------------------------------------------- */
/* 12. EMPTY STATES, PAGINATION, UTILITY SURFACES                             */
/* -------------------------------------------------------------------------- */

.pagination {
    gap: .55rem;
    margin-top: var(--space-xl);
}

.pagination a,
.pagination span {
    min-width: clamp(2.55rem, 4vw, 2.9rem);
    height: clamp(2.55rem, 4vw, 2.9rem);
    border-color: rgba(15, 23, 42, .1);
    border-radius: var(--radius-xs);
    box-shadow: 0 14px 32px -28px rgba(15, 23, 42, .55);
}

.empty-state {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 4.5rem);
    border-color: rgba(148, 163, 184, .65);
    border-radius: var(--radius-fluid-lg);
    background:
        radial-gradient(circle at 50% 0, rgba(245, 158, 11, .08), transparent 20rem),
        #fff;
    box-shadow: var(--shadow-slate-sm);
}

.empty-state .icon-wrap {
    width: clamp(3.7rem, 6vw, 4.5rem);
    height: clamp(3.7rem, 6vw, 4.5rem);
    border: 1px solid rgba(245, 158, 11, .18);
    box-shadow: var(--shadow-gold-sm);
}

.empty-state h2 {
    font-size: var(--fluid-2xl);
}

.empty-state p {
    font-size: var(--fluid-base);
}

/* -------------------------------------------------------------------------- */
/* 13. FOOTER                                                                 */
/* -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(3.7rem, 8vw, 6.7rem);
    background:
        linear-gradient(180deg, var(--brand-slate-900), var(--brand-slate-950));
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.footer-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.footer-glow-one {
    inset: -14rem auto auto -10rem;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(245, 158, 11, .12), transparent 68%);
}

.footer-glow-two {
    inset: auto -14rem -18rem auto;
    width: 38rem;
    height: 38rem;
    background: radial-gradient(circle, rgba(51, 65, 85, .45), transparent 68%);
}

.footer-grid {
    grid-template-columns: minmax(15rem, 1.35fr) repeat(2, minmax(10rem, .85fr)) minmax(14rem, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer-brand p {
    max-width: 28rem;
    margin: 1.15rem 0 1.3rem;
    color: var(--brand-slate-400);
    font-size: var(--fluid-sm);
    line-height: 1.86;
}

.footer-socials {
    gap: .65rem;
}

.footer-socials a {
    width: clamp(2.55rem, 4vw, 2.9rem);
    height: clamp(2.55rem, 4vw, 2.9rem);
    border-color: rgba(255, 255, 255, .1);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.footer-column h2 {
    position: relative;
    width: fit-content;
    margin: .25rem 0 1.25rem;
    padding-bottom: .65rem;
    font-size: var(--fluid-base);
}

.footer-column h2::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    width: 2.6rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-gold), transparent);
}

html[dir="rtl"] .footer-column h2::after {
    background: linear-gradient(270deg, var(--brand-gold), transparent);
}

.footer-column ul {
    gap: .72rem;
}

.footer-column li a {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    font-size: var(--fluid-xs);
}

.footer-column li a .icon {
    color: rgba(245, 158, 11, .72);
    transition: transform .2s ease;
}

.footer-contact-list {
    gap: .8rem !important;
}

.footer-contact-list li {
    gap: .68rem;
    font-size: var(--fluid-xs);
    line-height: 1.55;
}

.footer-contact-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(245, 158, 11, .12);
    border-radius: .68rem;
    color: var(--brand-gold);
    background: rgba(245, 158, 11, .07);
}

.footer-bottom {
    padding-block: clamp(1rem, 2vw, 1.4rem);
    border-top-color: rgba(255, 255, 255, .085);
    font-size: var(--fluid-xs);
}

.footer-bottom div {
    gap: clamp(.75rem, 2vw, 1.25rem);
}

/* -------------------------------------------------------------------------- */
/* 14. FLOATING ACTIONS                                                       */
/* -------------------------------------------------------------------------- */

.floating-actions {
    inset-inline-end: max(clamp(.8rem, 2vw, 1.4rem), env(safe-area-inset-right));
    bottom: max(clamp(.8rem, 2vw, 1.4rem), env(safe-area-inset-bottom));
    gap: .7rem;
}

.floating-actions a,
.floating-actions button {
    position: relative;
    width: clamp(3rem, 5vw, 3.5rem);
    height: clamp(3rem, 5vw, 3.5rem);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
        0 22px 48px -24px rgba(2, 6, 23, .8),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

.floating-whatsapp {
    background: linear-gradient(145deg, #22c55e, #15803d);
}

.floating-ring {
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid rgba(34, 197, 94, .55);
    border-radius: 50%;
}

.floating-top {
    background: linear-gradient(145deg, var(--brand-slate-800), var(--brand-slate-950));
}

/* -------------------------------------------------------------------------- */
/* 15. REVEAL SYSTEM — DESKTOP ONLY BY DESIGN                                 */
/* -------------------------------------------------------------------------- */

.reveal-enabled [data-reveal] {
    --reveal-x: 0px;
    --reveal-y: 28px;
    --reveal-scale: .985;
    opacity: 0;
    transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
    transition:
        opacity .72s var(--ease-standard),
        transform .72s var(--ease-emphasized);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
}

.js [data-reveal="fade-left"] {
    --reveal-x: -34px;
    --reveal-y: 0px;
}

.js [data-reveal="fade-right"] {
    --reveal-x: 34px;
    --reveal-y: 0px;
}

html[dir="rtl"] .js [data-reveal="fade-left"] {
    --reveal-x: 34px;
}

html[dir="rtl"] .js [data-reveal="fade-right"] {
    --reveal-x: -34px;
}

.js [data-reveal="zoom"] {
    --reveal-x: 0px;
    --reveal-y: 0px;
    --reveal-scale: .94;
}

.reveal-enabled [data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* -------------------------------------------------------------------------- */
/* 16. ARTICLE-SPECIFIC READING EXPERIENCE                                    */
/* -------------------------------------------------------------------------- */

.page-article .section-white > .site-shell[style*="max-width"] {
    width: min(900px, calc(100% - 2rem));
}

.page-article .rich-content {
    position: relative;
}

.page-article .rich-content > p:first-of-type {
    color: var(--brand-slate-700);
    font-size: clamp(1.04rem, .95rem + .4vw, 1.2rem);
}

.page-article .rich-content img {
    width: 100%;
    margin-block: var(--space-lg);
    border-radius: var(--radius-fluid-lg);
    box-shadow: var(--shadow-slate-md);
}

.page-article .rich-content hr {
    height: 1px;
    margin-block: var(--space-xl);
    border: 0;
    background: linear-gradient(90deg, transparent, var(--brand-slate-300), transparent);
}

/* -------------------------------------------------------------------------- */
/* 17. DESKTOP PREMIUM MOTION AND HOVER                                        */
/* -------------------------------------------------------------------------- */

@media (min-width: 1081px) and (hover: hover) and (pointer: fine) {
    @keyframes hero-image-breathe {
        0% {
            transform: scale(1.035) translate3d(0, 0, 0);
        }
        50% {
            transform: scale(1.075) translate3d(-.35%, -.25%, 0);
        }
        100% {
            transform: scale(1.035) translate3d(0, 0, 0);
        }
    }

    @keyframes badge-shine {
        0%, 62% {
            left: -120%;
        }
        100% {
            left: 150%;
        }
    }

    @keyframes ring-pulse {
        0% {
            transform: scale(1);
            opacity: .65;
        }
        75%, 100% {
            transform: scale(1.75);
            opacity: 0;
        }
    }

    @keyframes ambient-float-one {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
        50% {
            transform: translate3d(2.5rem, 1.5rem, 0) scale(1.08);
        }
    }

    @keyframes ambient-float-two {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(1);
        }
        50% {
            transform: translate3d(-2rem, -1.2rem, 0) scale(1.06);
        }
    }

    .site-ambient-orb-one {
        animation: ambient-float-one 16s ease-in-out infinite;
    }

    .site-ambient-orb-two {
        animation: ambient-float-two 19s ease-in-out infinite;
    }

    .page-hero-image {
        animation: hero-image-breathe 18s ease-in-out infinite;
    }

    .page-badge::before {
        animation: badge-shine 5.6s ease-in-out infinite;
    }

    .button:hover::before {
        animation: badge-shine 1.05s ease forwards;
    }

    .button:hover {
        transform: translateY(-3px) scale(1.012);
    }

    .button-primary:hover {
        box-shadow:
            var(--shadow-gold-md),
            inset 0 1px 0 rgba(255, 255, 255, .28);
    }

    .header-call:hover {
        transform: translateY(-2px) scale(1.02);
    }

    .content-card {
        transform-style: preserve-3d;
        will-change: transform;
    }

    .content-card:hover {
        transform: translateY(-10px) perspective(900px) rotateX(.7deg);
        border-color: rgba(245, 158, 11, .36);
        box-shadow:
            0 38px 86px -46px rgba(15, 23, 42, .62),
            0 20px 48px -38px rgba(245, 158, 11, .3);
    }

    .content-card:hover::before {
        opacity: 1;
    }

    .content-card:hover::after {
        transform: scaleX(1);
    }

    .content-card:hover .card-media img {
        transform: scale(1.075);
        filter: saturate(1.03) contrast(1.03);
    }

    .content-card:hover .card-icon {
        transform: translateY(-3px) rotate(-2deg);
    }

    html[dir="rtl"] .content-card:hover .card-icon {
        transform: translateY(-3px) rotate(2deg);
    }

    .trust-item:hover::after {
        opacity: 1;
    }

    .trust-item:hover .trust-item-icon {
        transform: translateY(-3px) scale(1.04);
    }

    .feature-item:hover {
        transform: translateY(-5px);
        border-color: rgba(22, 163, 74, .2);
        box-shadow: 0 28px 64px -44px rgba(15, 23, 42, .55);
    }

    .feature-item:hover .feature-icon {
        transform: rotate(-4deg) scale(1.06);
    }

    html[dir="rtl"] .feature-item:hover .feature-icon {
        transform: rotate(4deg) scale(1.06);
    }

    .process-card:hover {
        transform: translateY(-8px);
        border-color: rgba(245, 158, 11, .28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .06),
            0 34px 74px -45px rgba(245, 158, 11, .35);
    }

    .process-card:hover::before {
        opacity: 1;
    }

    .process-card:hover .process-card-number {
        transform: scale(1.08) rotate(-5deg);
        box-shadow:
            0 0 0 1px rgba(245, 158, 11, .7),
            0 0 34px rgba(245, 158, 11, .45);
    }

    html[dir="rtl"] .process-card:hover .process-card-number {
        transform: scale(1.08) rotate(5deg);
    }

    .gallery-item:hover::before {
        opacity: 1;
    }

    .gallery-item:hover img {
        transform: scale(1.07);
        filter: saturate(1.04) contrast(1.04);
    }

    .faq-item:hover {
        transform: translateY(-2px);
        border-color: rgba(245, 158, 11, .2);
        box-shadow: 0 24px 58px -42px rgba(15, 23, 42, .6);
    }

    .intro-layout:hover .intro-media img {
        transform: scale(1.025);
        filter: saturate(1.02);
    }

    .footer-socials a:hover {
        transform: translateY(-4px) rotate(-3deg);
        border-color: rgba(245, 158, 11, .3);
        color: var(--brand-gold-soft);
        background: rgba(245, 158, 11, .08);
    }

    html[dir="rtl"] .footer-socials a:hover {
        transform: translateY(-4px) rotate(3deg);
    }

    .footer-column li a:hover .icon {
        transform: translateX(-3px);
    }

    html[dir="ltr"] .footer-column li a:hover .icon {
        transform: translateX(3px);
    }

    .floating-ring {
        animation: ring-pulse 2.2s ease-out infinite;
    }

    .floating-actions a:hover,
    .floating-actions button:hover {
        transform: translateY(-4px) scale(1.06);
    }

    .brand-icon,
    .brand-name,
    .trust-item-icon,
    .card-icon,
    .feature-item,
    .feature-icon,
    .process-card,
    .process-card-number,
    .footer-socials a,
    .floating-actions a,
    .floating-actions button {
        transition:
            transform .32s var(--ease-standard),
            border-color .32s ease,
            color .32s ease,
            background .32s ease,
            box-shadow .32s ease;
    }
}

/* -------------------------------------------------------------------------- */
/* 18. LAPTOP / SMALL DESKTOP                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    :root {
        --shell: min(100% - 2rem, 1080px);
    }

    .desktop-nav {
        gap: .7rem;
    }

    .desktop-nav > a,
    .nav-dropdown-trigger {
        font-size: .82rem;
    }

    .mega-menu {
        width: min(820px, 90vw);
    }

    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-grid::before {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/* 19. TABLET                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    :root {
        --header-height-expanded: 4.7rem;
        --header-height-compact: 4.35rem;
    }

    .desktop-nav {
        display: none;
    }

    .mobile-menu-button {
        display: grid;
    }

    .mobile-navigation.is-open {
        display: block;
    }

    .mobile-navigation-head {
        display: flex;
    }

    .header-call span:not(.header-call-icon),
    .language-trigger > span {
        display: none;
    }

    .header-call,
    .language-trigger {
        width: 2.8rem;
        min-width: 2.8rem;
        min-height: 2.8rem;
        padding: 0;
    }

    .header-call-icon {
        background: transparent;
    }

    .language-trigger .icon-sm {
        display: none;
    }

    .page-main {
        padding-top: var(--header-height-expanded);
    }

    .page-hero {
        min-height: clamp(28rem, 72vw, 38rem);
    }

    .page-hero-content {
        max-width: min(48rem, 92vw);
    }

    .intro-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .intro-media {
        min-height: clamp(20rem, 62vw, 32rem);
        order: -1;
    }

    .contact-panel {
        order: 2;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-item:nth-child(2) {
        border-inline-end: 0;
    }

    .trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }
}

/* -------------------------------------------------------------------------- */
/* 20. MOBILE — INTENTIONALLY NON-ANIMATED, FAST, CALM                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    :root {
        --shell: min(100% - 1rem, 1180px);
        --header-height-expanded: 4.35rem;
        --header-height-compact: 4.2rem;
    }

    html {
        scroll-behavior: auto;
    }

    .site-ambient,
    .site-header-glow,
    .mega-menu-glow,
    .footer-glow,
    .brand-icon-ring,
    .floating-ring {
        display: none !important;
    }

    .site-header,
    .site-header.is-scrolled {
        height: var(--header-height-expanded);
        transition: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .brand-icon {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: .72rem;
    }

    .brand-name {
        max-width: 11rem;
        overflow: hidden;
        font-size: clamp(1.02rem, 4.4vw, 1.22rem);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-line {
        width: 3.4rem;
    }

    .header-actions {
        gap: .32rem;
    }

    .language-menu {
        display: none;
    }

    .header-call,
    .mobile-menu-button {
        width: 2.55rem;
        min-width: 2.55rem;
        height: 2.55rem;
        min-height: 2.55rem;
        border-radius: .72rem;
    }

    .mobile-navigation {
        inset-block-start: var(--header-height-expanded);
        top: var(--header-height-expanded);
    }

    .mobile-navigation a,
    .mobile-navigation summary {
        min-height: 3rem;
        padding: .72rem .85rem;
        border-radius: .78rem;
    }

    .mobile-call {
        width: 100%;
    }

    .page-main {
        padding-top: var(--header-height-expanded);
    }

    .page-hero {
        min-height: auto;
        align-items: end;
    }

    .page-hero::before {
        background: linear-gradient(180deg, rgba(2, 6, 23, .66), rgba(2, 6, 23, .96) 72%);
    }

    html[dir="rtl"] .page-hero::before {
        background: linear-gradient(180deg, rgba(2, 6, 23, .66), rgba(2, 6, 23, .96) 72%);
    }

    .page-hero::after {
        display: none;
    }

    .page-hero-image {
        animation: none !important;
        transform: none !important;
        filter: saturate(.9) contrast(1.03);
    }

    .page-hero-content {
        max-width: 100%;
        padding-block: clamp(4.2rem, 18vw, 6.5rem) clamp(3.4rem, 14vw, 5rem);
    }

    .page-hero-content::before {
        display: none;
    }

    .breadcrumbs {
        max-width: 100%;
        overflow-x: auto;
        padding: .35rem .55rem;
        font-size: .72rem;
        scrollbar-width: none;
        white-space: nowrap;
    }

    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .page-badge {
        margin-bottom: .8rem;
        padding: .4rem .62rem;
        font-size: .74rem;
    }

    .page-badge::before {
        display: none;
    }

    .page-title {
        max-width: 100%;
        font-size: clamp(2.05rem, 10.5vw, 3.2rem);
        line-height: 1.03;
        letter-spacing: -.035em;
    }

    .page-lead {
        margin-top: .95rem;
        font-size: clamp(.96rem, 3.8vw, 1.08rem);
        line-height: 1.7;
    }

    .hero-actions,
    .cta-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: .6rem;
    }

    .button {
        width: 100%;
        min-height: 3rem;
        padding: .72rem .9rem;
        transition: none !important;
    }

    .button::before {
        display: none;
    }

    .section {
        padding-block: clamp(3.5rem, 14vw, 4.7rem);
    }

    .section-kicker {
        font-size: .72rem;
        letter-spacing: .11em;
    }

    .section-kicker::before {
        width: 1.7rem;
    }

    .section-title {
        font-size: clamp(1.78rem, 7.7vw, 2.45rem);
        line-height: 1.16;
    }

    .section-description {
        font-size: .96rem;
        line-height: 1.75;
    }

    .card-grid,
    .features-grid,
    .contact-layout,
    .form-grid,
    .footer-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .content-card,
    .feature-item,
    .process-card,
    .faq-item,
    .contact-panel,
    .contact-form-card,
    .cta-panel,
    .intro-media {
        transform: none !important;
        transition: none !important;
    }

    .content-card::before,
    .content-card::after,
    .feature-item::after,
    .process-card::before {
        display: none;
    }

    .card-media img,
    .intro-media img,
    .gallery-item img {
        transform: none !important;
        transition: none !important;
    }

    .card-body {
        padding: 1.05rem;
    }

    .card-icon {
        width: 3rem;
        height: 3rem;
        margin-top: -1.7rem;
        margin-bottom: .8rem;
    }

    .content-card:not(:has(.card-media)) .card-icon {
        margin-top: 0;
    }

    .card-title {
        font-size: 1.18rem;
    }

    .card-description {
        font-size: .92rem;
        line-height: 1.68;
    }

    .intro-layout {
        grid-template-columns: 1fr;
        gap: 2.1rem;
    }

    .intro-media {
        min-height: clamp(18rem, 84vw, 27rem);
        order: -1;
        border-width: 3px;
        border-radius: 1.35rem;
    }

    .intro-media::before,
    .intro-media::after {
        display: none;
    }

    .rich-content {
        font-size: .97rem;
        line-height: 1.85;
    }

    .rich-content h2 {
        font-size: clamp(1.45rem, 6.5vw, 1.9rem);
    }

    .rich-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .trust-strip {
        margin-top: -1.35rem;
    }

    .trust-grid {
        grid-template-columns: 1fr;
        border-radius: 1.2rem;
    }

    .trust-item {
        min-height: 4.8rem;
        border-inline-end: 0;
        border-bottom: 1px solid var(--line);
    }

    .trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .process-grid::before {
        display: none;
    }

    .process-card {
        min-height: auto;
        padding: 1rem;
    }

    .process-card-number {
        width: 2.6rem;
        height: 2.6rem;
        border-width: 3px;
        border-radius: .85rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .gallery-item,
    .gallery-item:nth-child(1),
    .gallery-item:nth-child(5) {
        grid-column: 1;
        min-height: clamp(15rem, 72vw, 22rem);
        border-radius: 1.1rem;
        cursor: default;
    }

    .gallery-item::before {
        display: none;
    }

    .faq-button {
        min-height: 3.7rem;
        padding: .95rem 1rem;
        font-size: .95rem;
    }

    .faq-panel {
        padding: 0 1rem 1rem;
        font-size: .92rem;
    }

    .cta-panel {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 1.35rem;
        border-radius: 1.3rem;
    }

    .cta-panel::before,
    .cta-panel::after {
        display: none;
    }

    .cta-panel h2 {
        font-size: clamp(1.7rem, 7.6vw, 2.35rem);
    }

    .contact-panel,
    .contact-form-card {
        padding: 1.1rem;
        border-radius: 1.2rem;
    }

    .form-field.full {
        grid-column: auto;
    }

    .footer-grid {
        gap: 2rem;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .floating-actions {
        inset-inline-end: max(.75rem, env(safe-area-inset-right));
        bottom: max(.75rem, env(safe-area-inset-bottom));
    }

    .floating-actions a,
    .floating-actions button {
        width: 3rem;
        height: 3rem;
        transition: none !important;
    }

    .image-lightbox {
        display: none !important;
    }

    .reveal-enabled [data-reveal],
    .js [data-reveal="fade-left"],
    .js [data-reveal="fade-right"],
    .js [data-reveal="zoom"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 21. EXTRA-SMALL MOBILE                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 390px) {
    :root {
        --shell: calc(100% - .8rem);
    }

    .brand-name {
        max-width: 8.7rem;
        font-size: 1rem;
    }

    .header-call {
        display: none;
    }

    .page-title {
        font-size: clamp(1.9rem, 10.6vw, 2.6rem);
    }

    .page-lead {
        font-size: .92rem;
    }

    .button {
        font-size: .88rem;
    }

    .card-body,
    .feature-item,
    .process-card,
    .contact-panel,
    .contact-form-card {
        padding: .95rem;
    }
}

/* -------------------------------------------------------------------------- */
/* 22. WIDE DESKTOP                                                            */
/* -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
    :root {
        --shell: min(1280px, calc(100% - 4rem));
    }

    .page-hero-content {
        max-width: 64rem;
    }

    .mega-menu {
        width: 960px;
    }

    .card-grid {
        gap: 1.6rem;
    }
}

/* -------------------------------------------------------------------------- */
/* 23. REDUCED MOTION                                                          */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .page-hero-image,
    .site-ambient-orb {
        animation: none !important;
        transform: none !important;
    }

    .reveal-enabled [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 24. PRINT                                                                   */
/* -------------------------------------------------------------------------- */

@media print {
    .site-header,
    .site-footer,
    .floating-actions,
    .site-ambient,
    .hero-actions,
    .cta-panel,
    .mobile-navigation,
    .image-lightbox {
        display: none !important;
    }

    .page-main {
        padding-top: 0;
    }

    .page-hero {
        min-height: auto;
        color: #000;
        background: #fff;
    }

    .page-hero-image,
    .page-hero::before,
    .page-hero::after {
        display: none;
    }

    .page-hero-content {
        padding-block: 1rem;
    }

    .page-title,
    .page-lead,
    .breadcrumbs,
    .page-badge {
        color: #000;
    }

    .section {
        padding-block: 1.5rem;
    }

    .content-card,
    .feature-item,
    .process-card,
    .faq-item,
    .intro-media {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* ========================================================================== 
   GRANDMASTER V2 — DETAIL PAGE POLISH, ARTICLE SURFACES AND STATE HELPERS
   ========================================================================== */

body.lightbox-is-open {
    overflow: hidden;
}

.form-honeypot {
    position: absolute !important;
    inset-inline-start: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.page-hero-copy {
    position: relative;
    z-index: 3;
    width: min(100%, 62rem);
}

.page-hero-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.11;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
    background-size: clamp(2.75rem, 5vw, 5.5rem) clamp(2.75rem, 5vw, 5.5rem);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), transparent 92%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), transparent 92%);
}

.page-hero-orb {
    position: absolute;
    z-index: 1;
    width: clamp(15rem, 30vw, 34rem);
    aspect-ratio: 1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(clamp(1rem, 2.3vw, 2.75rem));
    opacity: 0.42;
}

.page-hero-orb-one {
    inset-block-start: -18%;
    inset-inline-end: -9%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.28), transparent 70%);
}

.page-hero-orb-two {
    inset-block-end: -35%;
    inset-inline-start: -12%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 72%);
}

.article-shell,
.faq-shell {
    width: min(100%, 60rem);
    margin-inline: auto;
}

.article-surface {
    position: relative;
    padding: clamp(1.35rem, 3.2vw, 3.5rem);
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: clamp(1.25rem, 2.4vw, 2rem);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97));
    box-shadow:
        0 2rem 5rem -3rem rgba(15, 23, 42, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.article-surface::before {
    content: '';
    position: absolute;
    inset-block: clamp(1.2rem, 3vw, 3rem);
    inset-inline-start: 0;
    width: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(to bottom, #f59e0b, rgba(245, 158, 11, 0.08));
}

.editorial-card .card-media-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.38), transparent 58%);
    pointer-events: none;
}

.card-index {
    position: absolute;
    inset-block-end: clamp(0.75rem, 2vw, 1.15rem);
    inset-inline-end: clamp(0.75rem, 2vw, 1.15rem);
    display: grid;
    place-items: center;
    min-width: 2.55rem;
    height: 2.55rem;
    padding-inline: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.premium-media-frame {
    position: relative;
    isolation: isolate;
}

.premium-media-frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: clamp(0.65rem, 1.6vw, 1.25rem) clamp(-0.65rem, -1.6vw, -1.25rem) clamp(-0.65rem, -1.6vw, -1.25rem) clamp(0.65rem, 1.6vw, 1.25rem);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: inherit;
}

.media-frame-accent {
    position: absolute;
    z-index: 2;
    inset-block-start: clamp(0.8rem, 2vw, 1.4rem);
    inset-inline-end: clamp(0.8rem, 2vw, 1.4rem);
    width: clamp(2.5rem, 5vw, 4.5rem);
    height: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 1.5rem rgba(245, 158, 11, 0.35);
}

.project-story-grid {
    align-items: stretch;
}

.project-story-card {
    height: 100%;
}

.project-story-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.project-story-card .rich-content {
    margin-block-start: 0.3rem;
}

.service-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.65rem, 1.5vw, 1rem);
}

.service-chip {
    min-height: clamp(2.8rem, 4vw, 3.35rem);
}

.map-frame {
    position: relative;
    overflow: hidden;
    min-height: clamp(20rem, 45vw, 30rem);
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: clamp(1.25rem, 2.8vw, 2.2rem);
    background: #e2e8f0;
    box-shadow: 0 2rem 5rem -3rem rgba(15, 23, 42, 0.45);
}

.map-frame iframe {
    display: block;
    width: 100%;
    min-height: clamp(20rem, 45vw, 30rem);
    border: 0;
}

.map-frame-accent {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 0.25rem;
    background: linear-gradient(90deg, transparent, #f59e0b, #22c55e, transparent);
    pointer-events: none;
}

.faq-question-number {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: clamp(2.25rem, 4vw, 2.8rem);
    height: clamp(2.25rem, 4vw, 2.8rem);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 0.9rem;
    color: #b45309;
    background: rgba(245, 158, 11, 0.08);
    font-size: clamp(0.7rem, 1vw, 0.8rem);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.faq-question-text {
    flex: 1 1 auto;
}

.faq-panel-inner {
    padding-block-start: 0.25rem;
}

.contact-form-card.is-success {
    border-color: rgba(34, 197, 94, 0.38);
    box-shadow: 0 2rem 5rem -3rem rgba(22, 163, 74, 0.36);
}

.contact-form-card.has-error {
    border-color: rgba(239, 68, 68, 0.34);
}

.error-hero {
    min-height: max(38rem, calc(100svh - var(--site-header-height, 5rem)));
    display: grid;
    align-items: center;
}

.error-hero-content {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 6vw, 6rem);
    padding-block: clamp(7rem, 14vw, 11rem) clamp(4rem, 8vw, 7rem);
}

.error-code {
    color: transparent;
    -webkit-text-stroke: clamp(1px, 0.18vw, 2px) rgba(245, 158, 11, 0.65);
    font-size: clamp(7rem, 18vw, 18rem);
    font-weight: 900;
    line-height: 0.72;
    letter-spacing: -0.08em;
    text-shadow: 0 0 4rem rgba(245, 158, 11, 0.13);
}

.error-copy {
    width: min(100%, 52rem);
}

.error-description {
    max-width: 46rem;
    margin-block-start: 1rem;
    color: rgba(226, 232, 240, 0.82);
}

.error-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.16;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(245, 158, 11, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.12) 1px, transparent 1px);
    background-size: clamp(2.5rem, 5vw, 5rem) clamp(2.5rem, 5vw, 5rem);
    transform: perspective(45rem) rotateX(62deg) scale(1.25) translateY(22%);
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient(to top, black, transparent 80%);
    mask-image: linear-gradient(to top, black, transparent 80%);
}

@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
    .page-hero-orb-one {
        animation: grandmaster-orb-drift-one 13s ease-in-out infinite alternate;
    }

    .page-hero-orb-two {
        animation: grandmaster-orb-drift-two 16s ease-in-out infinite alternate;
    }

    .editorial-card:hover .card-index {
        color: #0f172a;
        border-color: rgba(245, 158, 11, 0.75);
        background: #f59e0b;
        transform: translateY(-0.18rem) rotate(-3deg);
    }

    .error-code {
        animation: grandmaster-error-float 5s ease-in-out infinite;
    }
}

@keyframes grandmaster-orb-drift-one {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to { transform: translate3d(-2.5rem, 2rem, 0) scale(1.08); }
}

@keyframes grandmaster-orb-drift-two {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(3rem, -1.5rem, 0) scale(0.9); }
}

@keyframes grandmaster-error-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.8rem); }
}

@media (max-width: 63.999rem), (hover: none), (pointer: coarse) {
    .page-hero-orb,
    .error-code,
    .error-grid {
        animation: none !important;
        transform: none;
    }

    .page-hero-noise {
        opacity: 0.07;
    }

    .premium-media-frame::before {
        display: none;
    }
}

@media (max-width: 47.999rem) {
    .article-surface {
        padding: clamp(1.1rem, 5vw, 1.5rem);
        border-radius: 1.2rem;
    }

    .article-surface::before {
        display: none;
    }

    .service-chip-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-chip {
        width: 100%;
        justify-content: center;
    }

    .error-hero-content {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }

    .error-code {
        font-size: clamp(6rem, 30vw, 9rem);
        line-height: 0.82;
    }

    .error-copy,
    .error-copy .hero-actions {
        margin-inline: auto;
    }

    .error-copy .hero-actions {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero-orb,
    .error-code,
    .error-grid {
        animation: none !important;
        transform: none !important;
    }
}


/* ==========================================================================
   V3 SHARED HEADER DRAWER + FULL-VIEWPORT HERO SYSTEM
   Added as a final cascade layer so the existing Grandmaster design remains
   intact while the requested navigation and hero behaviour is deterministic.
   ========================================================================== */

.mobile-navigation {
    display: block;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 120;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transition: visibility 0s linear .34s, opacity .28s ease;
}

.mobile-navigation.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0s;
}

.mobile-navigation-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    background: rgba(2, 6, 23, .76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .28s ease;
}

.mobile-navigation.is-open .mobile-navigation-backdrop {
    opacity: 1;
}

.mobile-navigation-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(90vw, 25rem);
    height: 100%;
    overflow-y: auto;
    color: #fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(245, 158, 11, .16), transparent 20rem),
        linear-gradient(165deg, rgba(15, 23, 42, .995), rgba(2, 6, 23, .995));
    border-inline-start: 1px solid rgba(255, 255, 255, .1);
    box-shadow: -28px 0 70px rgba(2, 6, 23, .42);
    transform: translateX(105%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    overscroll-behavior: contain;
}

html[dir="rtl"] .mobile-navigation-panel {
    box-shadow: 28px 0 70px rgba(2, 6, 23, .42);
    transform: translateX(-105%);
}

.mobile-navigation.is-open .mobile-navigation-panel,
html[dir="rtl"] .mobile-navigation.is-open .mobile-navigation-panel {
    transform: translateX(0);
}

.mobile-navigation-inner {
    width: 100%;
    min-height: 100%;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
}

.mobile-navigation-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    justify-content: flex-start;
    padding: .78rem;
    background: rgba(15, 23, 42, .88);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.mobile-navigation-close {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    margin-inline-start: auto;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .82rem;
    color: #fff;
    background: rgba(255, 255, 255, .055);
}

.mobile-navigation-close:focus-visible,
.mobile-navigation-close:hover {
    color: var(--brand-gold-soft);
    border-color: rgba(245, 158, 11, .4);
    background: rgba(245, 158, 11, .12);
}

body.menu-is-open {
    overflow: hidden;
    touch-action: none;
}

/* Every internal page hero occupies the visible device viewport below the
   shared fixed header. svh prevents mobile browser chrome from causing jumps. */
.page-main {
    padding-top: var(--header-height-expanded);
}

.page-hero {
    min-height: calc(100svh - var(--header-height-expanded));
    min-height: calc(100dvh - var(--header-height-expanded));
    display: grid;
    align-items: center;
}

.page-hero-content {
    width: 100%;
    padding-block: clamp(4.5rem, 10vh, 8rem);
}

/* Trust evidence is a distinct section below the hero, never an overlapping
   extension of it. */
.trust-strip,
.project-facts {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
    padding-block: clamp(1rem, 2.4vw, 1.7rem);
    border-block: 1px solid rgba(15, 23, 42, .08);
    background:
        radial-gradient(circle at 12% 0%, rgba(245, 158, 11, .09), transparent 19rem),
        linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 16px 45px rgba(15, 23, 42, .07);
}

@media (max-width: 1080px) {
    .mobile-navigation {
        display: block;
    }

    .page-hero {
        min-height: calc(100svh - var(--header-height-expanded)) !important;
        min-height: calc(100dvh - var(--header-height-expanded)) !important;
        align-items: end;
    }

    .page-hero-content {
        max-width: 100%;
        padding-block: clamp(4rem, 13vh, 6.5rem) clamp(2.7rem, 8vh, 4.5rem);
    }
}

@media (max-width: 760px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .mobile-navigation,
    .mobile-navigation-backdrop,
    .mobile-navigation-panel {
        animation: none !important;
    }

    .mobile-navigation-panel {
        transition-duration: .22s;
    }

    .page-hero,
    .page-hero-image,
    .page-hero-content,
    .page-hero-orb,
    .page-hero-noise {
        animation: none !important;
    }

    .page-hero-image {
        transform: none !important;
        will-change: auto !important;
    }
}

/* Keep the drawer pinned to the viewport even after the compact-header state. */
.site-header .mobile-navigation,
.site-header.is-scrolled .mobile-navigation {
    inset: 0;
    top: 0;
    inset-block-start: 0;
}

/* ========================================================================== 
   V4 TARGETED INTERACTION FIXES
   Header line geometry, viewport-level mobile drawer, directional arrows,
   calculated floating labels, and homepage-parity service process stepper.
   ========================================================================== */

/* 01. Desktop navigation underline is measured against the actual label. */
.desktop-nav > a::after,
.nav-dropdown-trigger::after {
    inset: auto auto .28rem var(--nav-underline-left, 50%);
    width: 0;
    max-width: none;
    transform: none;
    transform-origin: center;
}

.desktop-nav > a:hover::after,
.desktop-nav > a:focus-visible::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger:focus-visible::after,
.nav-dropdown-trigger[aria-expanded="true"]::after {
    width: var(--nav-underline-width, 74%);
}

/* 02. Directional artwork is resolved by JavaScript from dir + semantics. */
[data-directional-arrow] {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(var(--direction-rotation, 0deg));
    transition: transform .22s var(--ease-standard);
}

/* Safe pre-JS defaults: the database arrow artwork points left. */
html[dir="ltr"] [data-directional-arrow="forward"][data-arrow-base="left"],
html[dir="rtl"] [data-directional-arrow="backward"][data-arrow-base="left"],
html[dir="ltr"] [data-directional-arrow="backward"][data-arrow-base="right"],
html[dir="rtl"] [data-directional-arrow="forward"][data-arrow-base="right"] {
    --direction-rotation: 180deg;
}

/* 03. The mobile drawer is a body-level viewport portal, never a header child. */
.mobile-navigation[data-mobile-navigation-portal] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-panel {
    position: fixed;
    inset-block: 0;
    width: min(91vw, 26rem);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body.menu-is-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* 04. Header call belongs to desktop; mobile/tablet receives a floating call. */
.floating-call {
    display: none !important;
    background: linear-gradient(135deg, var(--brand-gold-soft), var(--brand-gold-dark));
}

.floating-actions {
    z-index: 4200;
    align-items: end;
}

.floating-action {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.floating-action > .icon {
    position: relative;
    z-index: 2;
}

.floating-tooltip {
    display: block;
    position: fixed;
    z-index: 5100;
    left: var(--tooltip-left, 0px);
    top: var(--tooltip-top, 0px);
    width: max-content;
    max-width: min(17rem, calc(100vw - 1rem));
    padding: .55rem .78rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: .72rem;
    color: #fff;
    background: rgba(2, 6, 23, .96);
    box-shadow: 0 16px 38px -18px rgba(2, 6, 23, .88);
    font-size: clamp(.76rem, .7rem + .18vw, .88rem);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(.96);
    transform-origin: center;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.floating-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: .58rem;
    height: .58rem;
    background: rgba(2, 6, 23, .96);
    transform: translateY(-50%) rotate(45deg);
}

.floating-tooltip[data-tooltip-placement="left"]::after {
    right: -.3rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-right: 1px solid rgba(255, 255, 255, .13);
}

.floating-tooltip[data-tooltip-placement="right"]::after {
    left: -.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    border-left: 1px solid rgba(255, 255, 255, .13);
}

.floating-action:hover .floating-tooltip,
.floating-action:focus-visible .floating-tooltip,
.floating-action:focus-within .floating-tooltip,
.floating-action.is-tooltip-visible .floating-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
    transition-delay: 0s;
}

@media (max-width: 1080px) {
    .header-call {
        display: none !important;
    }

    .floating-call {
        display: grid !important;
    }
}

@media (max-width: 760px) {
    .floating-actions {
        inset-inline-end: max(.72rem, env(safe-area-inset-right));
        bottom: max(.72rem, env(safe-area-inset-bottom));
        gap: .52rem;
    }

    .floating-actions .floating-action {
        width: clamp(2.85rem, 13vw, 3.15rem);
        height: clamp(2.85rem, 13vw, 3.15rem);
    }
}

/* 05. Service process — visual/behavioural parity with the homepage process. */
.service-process-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--text-main);
    background: linear-gradient(180deg, #fff 0%, #f8fafc 48%, #f1f5f9 100%);
}

.service-process-shell {
    position: relative;
    z-index: 2;
}

.service-process-orb,
.service-process-edge {
    position: absolute;
    pointer-events: none;
}

.service-process-orb {
    border-radius: 999px;
    filter: blur(2px);
    opacity: .75;
}

.service-process-orb-one {
    inset-block-start: 5rem;
    inset-inline-end: -6rem;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 70%);
}

.service-process-orb-two {
    inset-block-end: 2rem;
    inset-inline-start: -7rem;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(15, 23, 42, .07), transparent 72%);
}

.service-process-edge {
    inset-inline: 0;
    height: 1px;
}

.service-process-edge-top {
    inset-block-start: 0;
    background: linear-gradient(90deg, transparent, rgba(203, 213, 225, .9), transparent);
}

.service-process-edge-bottom {
    inset-block-end: 0;
    background: linear-gradient(90deg, transparent, rgba(253, 230, 138, .9), transparent);
}

.service-process-head {
    max-width: 52rem;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
    justify-items: center;
    text-align: center;
}

.service-process-heading-mark {
    display: inline-grid;
    position: relative;
    place-items: center;
    width: clamp(3rem, 5vw, 3.5rem);
    height: clamp(3rem, 5vw, 3.5rem);
    margin-inline: auto;
    margin-bottom: 1rem;
    justify-self: center;
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 1rem;
    color: var(--brand-gold);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,247,237,.92));
    box-shadow: 0 14px 35px -18px rgba(245, 158, 11, .62);
}

.service-process-heading-mark::after {
    content: "";
    position: absolute;
    inset: -.45rem;
    z-index: -1;
    border-radius: 1.25rem;
    background: rgba(245, 158, 11, .07);
}

.service-process-desktop {
    display: block;
    position: relative;
    max-width: 85rem;
    min-height: clamp(19rem, 32vw, 25rem);
    margin: clamp(3rem, 6vw, 5rem) auto clamp(2rem, 4vw, 3rem);
    padding-inline: clamp(.5rem, 1.3vw, 1rem);
}

.service-process-river,
.service-process-mobile-river {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.service-process-river path,
.service-process-mobile-river path {
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, .48));
    stroke-linecap: round;
}

.service-process-desktop-grid {
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(var(--service-process-columns, 4), minmax(0, 1fr));
    gap: clamp(.75rem, 1.6vw, 1.35rem);
}

.service-process-desktop-step {
    display: flex;
    height: clamp(19rem, 32vw, 25rem);
    opacity: 1;
    transform: translateY(0) translateZ(0);
    transition: opacity .4s ease, transform .4s cubic-bezier(.25,1,.5,1);
    transition-delay: var(--process-delay, 0ms);
}

html.is-desktop-motion .service-process-desktop-step:not(.is-visible) {
    opacity: 0;
    transform: translateY(2rem) translateZ(0);
    will-change: transform, opacity;
}

.service-process-desktop-step.is-top {
    flex-direction: column;
}

.service-process-desktop-step.is-bottom {
    flex-direction: column-reverse;
}

.service-process-desktop-step.is-visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.service-process-card-slot,
.service-process-balance {
    flex: 1 1 0;
}

.service-process-card-slot {
    display: flex;
}

.service-process-desktop-step.is-top .service-process-card-slot {
    align-items: flex-end;
    padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

.service-process-desktop-step.is-bottom .service-process-card-slot {
    align-items: flex-start;
    padding-top: clamp(1.5rem, 3vw, 2rem);
}

.service-process-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.45rem);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 38px -24px rgba(15,23,42,.34);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.service-process-card-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, #fde68a, var(--brand-gold));
    transition: opacity .3s ease;
}

.service-process-card h3,
.service-process-mobile-card h3 {
    margin: 0 0 .55rem;
    color: #0f172a;
    font-size: clamp(1rem, .92rem + .35vw, 1.18rem);
    font-weight: 900;
    line-height: 1.3;
}

.service-process-card p,
.service-process-mobile-card p {
    margin: 0;
    color: #64748b;
    font-size: clamp(.78rem, .72rem + .18vw, .9rem);
    line-height: 1.72;
}

.service-process-node-slot {
    display: flex;
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: clamp(3rem, 6vw, 4rem);
}

.service-process-node,
.service-process-mobile-node {
    display: grid;
    place-items: center;
    border: clamp(2px, .35vw, 4px) solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #fbbf24, #f59e0b 54%, #d97706);
    box-shadow: 0 0 20px rgba(245, 158, 11, .42);
    font-weight: 900;
}

.service-process-node {
    width: clamp(3rem, 6vw, 4rem);
    height: clamp(3rem, 6vw, 4rem);
    font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
    transition: transform .3s ease, box-shadow .3s ease;
}

.service-process-mobile {
    display: none;
    position: relative;
    max-width: 43rem;
    margin-inline: auto;
}

.service-process-mobile-list {
    display: grid;
    position: relative;
    z-index: 1;
    gap: clamp(1rem, 3vw, 1.45rem);
}

.service-process-mobile-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(.75rem, 3vw, 1.25rem);
    transform: translateZ(0);
}

html[dir="rtl"] .service-process-mobile-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

html[dir="rtl"] .service-process-mobile-node {
    grid-column: 2;
}

html[dir="rtl"] .service-process-mobile-card {
    grid-column: 1;
    grid-row: 1;
}

.service-process-mobile-node {
    position: relative;
    z-index: 2;
    width: clamp(2.8rem, 11vw, 3.65rem);
    height: clamp(2.8rem, 11vw, 3.65rem);
    font-size: clamp(1rem, 4vw, 1.35rem);
}

.service-process-mobile-card {
    padding: clamp(1rem, 4vw, 1.35rem);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: 1.15rem;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 32px -24px rgba(15,23,42,.4);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .service-process-desktop-step:hover .service-process-card {
        transform: translateY(-.5rem);
        border-color: rgba(245,158,11,.4);
        box-shadow: 0 20px 44px -24px rgba(245,158,11,.34);
    }

    .service-process-desktop-step:hover .service-process-card-accent {
        opacity: 1;
    }

    .service-process-desktop-step:hover .service-process-node {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(245,158,11,.78);
    }
}

@media (max-width: 1023px) {
    .service-process-desktop {
        display: none;
    }

    .service-process-mobile {
        display: block;
    }

    .service-process-mobile-item,
    .service-process-mobile-card,
    .service-process-mobile-node {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 520px) {
    .service-process-mobile-river {
        opacity: .88;
    }

    .service-process-mobile-card {
        padding: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-process-desktop-step {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .floating-tooltip,
    [data-directional-arrow] {
        transition: none !important;
    }
}


/* ========================================================================== 
   V5 TARGETED MOBILE NAVIGATION + RESPONSIVE HERO REFINEMENT
   Premium viewport drawer, permanent compact language control, calculated
   hero geometry, direction-safe service arrows, and scroll-direction top CTA.
   ========================================================================== */

/* 01. Header controls remain measurable and usable at every compact width. */
.header-inner[data-header-inner] {
    --mobile-control-size: 2.75rem;
    --mobile-control-gap: .42rem;
    --mobile-brand-max: 13rem;
}

@media (max-width: 1080px) {
    .header-inner[data-header-inner] {
        gap: clamp(.42rem, 1.5vw, .8rem);
    }

    .header-inner[data-header-inner] .brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - (var(--mobile-control-size) * 2) - var(--mobile-control-gap) - .5rem);
    }

    .header-inner[data-header-inner] .brand-copy {
        min-width: 0;
        max-width: var(--mobile-brand-max);
    }

    .header-inner[data-header-inner] .brand-name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions[data-header-actions] {
        flex: 0 0 auto;
        gap: var(--mobile-control-gap);
    }

    /* The globe never disappears when desktop navigation collapses. */
    .header-actions[data-header-actions] .language-menu {
        display: block !important;
        position: relative;
        flex: 0 0 var(--mobile-control-size);
        width: var(--mobile-control-size);
        height: var(--mobile-control-size);
    }

    .header-actions[data-header-actions] .language-trigger,
    .header-actions[data-header-actions] .mobile-menu-button {
        display: grid;
        place-items: center;
        width: var(--mobile-control-size);
        min-width: var(--mobile-control-size);
        height: var(--mobile-control-size);
        min-height: var(--mobile-control-size);
        padding: 0;
        border-radius: clamp(.72rem, 2.7vw, .92rem);
    }

    .header-actions[data-header-actions] .language-trigger {
        color: #f8fafc;
        background:
            linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.1),
            0 12px 28px -22px rgba(245,158,11,.72);
    }

    .header-actions[data-header-actions] .language-trigger > span,
    .header-actions[data-header-actions] .language-trigger .icon-sm {
        display: none !important;
    }

    .header-actions[data-header-actions] .language-trigger > .icon:first-child {
        display: block !important;
        width: clamp(1.1rem, 4vw, 1.32rem);
        height: clamp(1.1rem, 4vw, 1.32rem);
    }

    .header-actions[data-header-actions] .language-trigger[aria-expanded="true"] {
        color: var(--brand-gold-soft);
        border-color: rgba(245,158,11,.44);
        background: rgba(245,158,11,.13);
    }

    .header-actions[data-header-actions] .language-popover {
        position: fixed;
        z-index: 6100;
        top: var(--language-popover-top, 4.8rem);
        left: var(--language-popover-left, .75rem);
        right: auto;
        inset-inline: auto;
        width: min(var(--language-popover-width, 12rem), calc(100vw - 1rem));
        min-width: 0;
        max-height: min(24rem, calc(100dvh - var(--language-popover-top, 4.8rem) - .75rem));
        overflow-y: auto;
        padding: .5rem;
        border-radius: 1.15rem;
        box-shadow:
            0 30px 80px -30px rgba(2,6,23,.96),
            inset 0 1px 0 rgba(255,255,255,.08);
    }
}

@media (max-width: 390px) {
    .brand-line {
        display: none;
    }

    .header-inner[data-header-inner] .brand-icon {
        width: clamp(2rem, 11vw, 2.3rem);
        height: clamp(2rem, 11vw, 2.3rem);
    }
}

/* 02. Premium mobile/tablet navigation: quiet motion, strong hierarchy. */
.mobile-navigation[data-mobile-navigation-portal] {
    --drawer-edge-gap: clamp(.38rem, 1.5vw, .7rem);
    background: transparent;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-backdrop {
    background:
        radial-gradient(circle at 18% 8%, rgba(245,158,11,.12), transparent 25rem),
        rgba(2,6,23,.74);
    backdrop-filter: blur(12px) saturate(.88);
    -webkit-backdrop-filter: blur(12px) saturate(.88);
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-panel {
    inset-block: var(--drawer-edge-gap);
    inset-inline-end: var(--drawer-edge-gap);
    width: min(calc(100dvw - (var(--drawer-edge-gap) * 2)), 29rem);
    height: calc(100dvh - (var(--drawer-edge-gap) * 2));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: clamp(1.25rem, 4vw, 1.8rem);
    background:
        linear-gradient(158deg, rgba(15,23,42,.995), rgba(2,6,23,.995) 62%, rgba(15,23,42,.992));
    box-shadow:
        -36px 0 100px -38px rgba(2,6,23,.98),
        0 30px 90px -45px rgba(0,0,0,.95),
        inset 0 1px 0 rgba(255,255,255,.07);
    transform: translateX(calc(105% + var(--drawer-edge-gap)));
}

html[dir="rtl"] .mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-panel {
    inset-inline-end: auto;
    inset-inline-start: var(--drawer-edge-gap);
    box-shadow:
        36px 0 100px -38px rgba(2,6,23,.98),
        0 30px 90px -45px rgba(0,0,0,.95),
        inset 0 1px 0 rgba(255,255,255,.07);
    transform: translateX(calc(-105% - var(--drawer-edge-gap)));
}

.mobile-navigation[data-mobile-navigation-portal].is-open .mobile-navigation-panel,
html[dir="rtl"] .mobile-navigation[data-mobile-navigation-portal].is-open .mobile-navigation-panel {
    transform: translateX(0);
}

.mobile-navigation-aura,
.mobile-navigation-grid {
    position: absolute;
    pointer-events: none;
}

.mobile-navigation-aura {
    border-radius: 999px;
    filter: blur(8px);
}

.mobile-navigation-aura-one {
    top: -7rem;
    inset-inline-start: -6rem;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(245,158,11,.19), transparent 69%);
}

.mobile-navigation-aura-two {
    bottom: -10rem;
    inset-inline-end: -8rem;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(22,163,74,.105), transparent 70%);
}

.mobile-navigation-grid {
    inset: 0;
    opacity: .15;
    background-image:
        linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-inner {
    display: flex;
    position: relative;
    z-index: 2;
    flex-direction: column;
    gap: clamp(.85rem, 2.5vh, 1.2rem);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding:
        max(.8rem, env(safe-area-inset-top))
        clamp(.72rem, 3vw, 1rem)
        max(1rem, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,.45) transparent;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-inner::-webkit-scrollbar {
    width: 4px;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-inner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(245,158,11,.45);
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .7rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1.15rem;
    background: rgba(15,23,42,.84);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    box-shadow: 0 14px 38px -30px rgba(0,0,0,.9);
}

.mobile-navigation-brand {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .65rem;
    min-width: 0;
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mobile-navigation-brand-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(245,158,11,.28);
    border-radius: .86rem;
    color: var(--brand-gold-soft);
    background: linear-gradient(145deg, rgba(245,158,11,.16), rgba(245,158,11,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.mobile-navigation-brand-copy {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.mobile-navigation-brand-copy strong,
.mobile-navigation-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-navigation-brand-copy strong {
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.2rem);
    line-height: 1.05;
}

.mobile-navigation-brand-copy small {
    color: #94a3b8;
    font-size: clamp(.68rem, 2.7vw, .78rem);
    font-weight: 700;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-close {
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    margin: 0;
    border-radius: .86rem;
    color: #f8fafc;
    background: rgba(255,255,255,.065);
}

.mobile-navigation-language {
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 1.1rem;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.mobile-navigation-language-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    color: #cbd5e1;
    font-size: clamp(.73rem, 2.8vw, .82rem);
    font-weight: 850;
}

.mobile-navigation-language-title .icon {
    color: var(--brand-gold-soft);
}

.mobile-navigation-language-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .38rem;
}

.mobile-navigation-language-option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .3rem;
    min-width: 0;
    min-height: 2.45rem !important;
    padding: .45rem .35rem !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: .75rem !important;
    color: #cbd5e1 !important;
    background: rgba(2,6,23,.3) !important;
    font-size: clamp(.68rem, 2.6vw, .78rem) !important;
    text-align: center;
}

.mobile-navigation-language-option > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-navigation-language-option.is-current {
    border-color: rgba(245,158,11,.42) !important;
    color: #111827 !important;
    background: linear-gradient(135deg, var(--brand-gold-soft), var(--brand-gold)) !important;
    box-shadow: 0 12px 25px -20px rgba(245,158,11,.9);
}

.mobile-navigation-links {
    display: grid;
    gap: .42rem;
    padding-bottom: .35rem;
}

.mobile-navigation-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center !important;
    justify-content: initial !important;
    gap: .7rem;
    min-height: clamp(3.35rem, 8vh, 3.85rem) !important;
    padding: .56rem .62rem !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    border-radius: 1rem !important;
    color: #e2e8f0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.048), rgba(255,255,255,.018)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.mobile-navigation-item-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid rgba(245,158,11,.15);
    border-radius: .75rem;
    color: var(--brand-gold-soft);
    background: rgba(245,158,11,.085);
}

.mobile-navigation-item-copy {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(.91rem, 3.5vw, 1.04rem);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-navigation-item-arrow,
.mobile-navigation-item-toggle {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    color: rgba(251,191,36,.82);
    background: rgba(2,6,23,.28);
}

.mobile-navigation-services[open] > summary {
    border-color: rgba(245,158,11,.25) !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(245,158,11,.13), rgba(255,255,255,.025)) !important;
}

.mobile-navigation-services[open] > summary .mobile-navigation-item-toggle .icon {
    transform: rotate(180deg);
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-service-list {
    display: grid;
    gap: .32rem;
    margin: .42rem .45rem .62rem;
    padding: .48rem;
    border: 0;
    border-radius: .95rem;
    background: rgba(2,6,23,.36);
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-service-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem;
    padding: .48rem .52rem;
    border: 1px solid transparent;
    border-radius: .76rem;
    color: #cbd5e1;
    font-size: clamp(.78rem, 3vw, .9rem);
    font-weight: 750;
    background: rgba(255,255,255,.022);
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-service-list a > span:not(.mobile-service-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-service-icon {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .62rem;
    color: var(--brand-gold-soft);
    background: rgba(245,158,11,.08);
}

.mobile-service-overview {
    color: var(--brand-gold-soft) !important;
    border-color: rgba(245,158,11,.16) !important;
}

@media (hover: hover) and (pointer: fine) {
    .mobile-navigation-item:hover,
    .mobile-navigation-item:focus-visible {
        border-color: rgba(245,158,11,.22) !important;
        background: linear-gradient(135deg, rgba(245,158,11,.11), rgba(255,255,255,.025)) !important;
    }

    .mobile-navigation[data-mobile-navigation-portal] .mobile-service-list a:hover,
    .mobile-navigation[data-mobile-navigation-portal] .mobile-service-list a:focus-visible {
        border-color: rgba(245,158,11,.16);
        color: #fff;
        background: rgba(245,158,11,.075);
    }
}

@media (max-width: 390px) {
    .mobile-navigation-language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-inner {
        gap: .7rem;
        padding-inline: .62rem;
    }

    .mobile-navigation-language {
        padding: .62rem;
    }

    .mobile-navigation-item {
        min-height: 3.15rem !important;
    }
}

/* 03. JS-measured hero/header geometry prevents dead space on short screens. */
:root {
    --runtime-header-height: var(--header-height-expanded);
    --runtime-viewport-height: 100dvh;
    --page-hero-padding-start: clamp(1.5rem, 6vh, 4rem);
    --page-hero-padding-end: clamp(1.5rem, 6vh, 4rem);
    --home-hero-padding-start: clamp(6rem, 12vh, 9rem);
    --home-hero-padding-end: clamp(3.5rem, 8vh, 6rem);
}

.page-main {
    padding-top: var(--runtime-header-height) !important;
}

.page-hero {
    min-height: max(26rem, calc(var(--runtime-viewport-height) - var(--runtime-header-height))) !important;
}

.page-hero-content {
    padding-block: var(--page-hero-padding-start) var(--page-hero-padding-end) !important;
}

#home[data-responsive-home-hero] {
    min-height: var(--runtime-viewport-height) !important;
    padding-top: var(--home-hero-padding-start) !important;
    padding-bottom: var(--home-hero-padding-end) !important;
}

#home[data-responsive-home-hero].is-height-constrained [data-responsive-home-hero-content] {
    --hero-tight-factor: .92;
}

@media (max-width: 1080px) {
    .page-hero {
        align-items: center !important;
    }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .page-hero {
        min-height: max(28rem, calc(var(--runtime-viewport-height) - var(--runtime-header-height))) !important;
    }

    #home[data-responsive-home-hero] {
        align-items: center !important;
    }

    #home[data-responsive-home-hero] [data-responsive-home-hero-content] {
        width: 100%;
    }
}

/* 04. Mega-menu arrows keep their calculated language direction on hover. */
html[dir="ltr"] .mega-service-arrow {
    transform: translateX(.4rem) rotate(var(--direction-rotation, 0deg));
}

html[dir="rtl"] .mega-service-arrow {
    transform: translateX(-.4rem) rotate(var(--direction-rotation, 0deg));
}

html[dir="ltr"] .mega-service:hover .mega-service-arrow,
html[dir="rtl"] .mega-service:hover .mega-service-arrow,
html[dir="ltr"] .mega-service:focus-visible .mega-service-arrow,
html[dir="rtl"] .mega-service:focus-visible .mega-service-arrow {
    opacity: 1;
    transform: translateX(0) rotate(var(--direction-rotation, 0deg));
}

/* 05. The conditional Top control lives above permanent communication CTAs. */
.floating-actions {
    isolation: isolate;
}

.floating-top {
    position: absolute !important;
    inset-inline-end: 0;
    bottom: calc(100% + .7rem);
    margin: 0 !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(.75rem) scale(.88);
    transform-origin: bottom center;
    transition:
        opacity .2s ease,
        transform .24s var(--ease-standard),
        visibility 0s linear .24s;
}

.floating-top.is-visible {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.floating-action .floating-tooltip {
    z-index: 10;
}

@media (hover: hover) and (pointer: fine) {
    .floating-action:hover .floating-tooltip,
    .floating-action:focus-visible .floating-tooltip,
    .floating-action:focus-within .floating-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) scale(1);
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-navigation[data-mobile-navigation-portal],
    .mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-backdrop,
    .mobile-navigation[data-mobile-navigation-portal] .mobile-navigation-panel,
    .floating-top {
        transition: none !important;
    }
}

.mobile-navigation-services[open] > summary .mobile-navigation-item-icon .icon {
    transform: none !important;
}

.mobile-navigation[data-mobile-navigation-portal] .mobile-service-list .mobile-service-overview {
    grid-template-columns: minmax(0, 1fr) auto;
}


/* ========================================================================== 
   V6 TARGETED HERO RHYTHM + PREMIUM CONTACT + RESPONSIVE SITE SHELL
   Database-driven CTA pages, measured internal hero geometry, premium content
   stages and explicit desktop WhatsApp tooltip support.
   ========================================================================== */

:root {
    --shell-max-width: 82rem;
    --shell-inline-gutter: clamp(1rem, 4vw, 4.5rem);
    --page-hero-content-min-height: calc(100dvh - var(--runtime-header-height));
    --hero-breadcrumb-copy-gap: clamp(1rem, 4vh, 4rem);
    --hero-badge-title-gap: clamp(.7rem, 1.4vw, 1.2rem);
    --hero-title-lead-gap: clamp(.9rem, 1.7vw, 1.5rem);
    --hero-lead-actions-gap: clamp(1.15rem, 2.1vw, 1.9rem);
}

/* Fluid safe-area shell: header, hero and content share one visual axis. */
.site-shell {
    width: min(
        calc(100% - (var(--shell-inline-gutter) * 2)),
        var(--shell-max-width)
    ) !important;
    margin-inline: auto;
}

/* Internal hero is one measured viewport composition: breadcrumb at top,
   content naturally balanced below it without fixed device-specific gaps. */
.page-hero {
    min-height: var(--page-hero-content-min-height) !important;
}

.page-hero-content {
    width: min(
        calc(100% - (var(--shell-inline-gutter) * 2)),
        var(--shell-max-width)
    ) !important;
    max-width: none !important;
    min-height: var(--page-hero-content-min-height);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-block: var(--page-hero-padding-start) var(--page-hero-padding-end) !important;
}

.page-hero-content > .breadcrumbs {
    flex: 0 0 auto;
    margin: 0 !important;
}

.page-hero-copy {
    width: min(100%, 62rem);
    margin-block-start: var(--hero-breadcrumb-copy-gap);
    margin-block-end: auto;
    align-self: flex-start;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
}

.page-hero-copy > .page-badge {
    margin: 0 0 var(--hero-badge-title-gap) !important;
}

.page-hero-copy > .page-title {
    margin: 0 !important;
}

.page-hero-copy > .page-lead {
    margin: var(--hero-title-lead-gap) 0 0 !important;
}

.page-hero-copy > .hero-actions {
    margin: var(--hero-lead-actions-gap) 0 0 !important;
}

.page-hero.is-content-constrained .page-hero-copy {
    margin-block-start: clamp(.75rem, 2vh, 1.4rem);
}

/* Premium stage modifier used only on the requested content/click surfaces. */
.site-shell-premium {
    position: relative;
    isolation: isolate;
    padding: clamp(1.05rem, 2.5vw, 2.35rem);
    border: 1px solid rgba(15, 23, 42, .085);
    border-radius: clamp(1.35rem, 2.7vw, 2.45rem);
    background:
        radial-gradient(circle at 100% 0, rgba(245, 158, 11, .08), transparent 22rem),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
    box-shadow:
        0 34px 90px -58px rgba(15, 23, 42, .55),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.site-shell-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15,23,42,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.022) 1px, transparent 1px);
    background-size: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.52), transparent 78%);
}

.site-shell-premium > * {
    position: relative;
    z-index: 1;
}

.section-soft .site-shell-premium {
    background:
        radial-gradient(circle at 0 0, rgba(245,158,11,.09), transparent 22rem),
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(241,245,249,.97));
}

.site-shell-premium > .section-head {
    position: relative;
}

.site-shell-premium > .section-head::after {
    content: "";
    width: clamp(3.25rem, 7vw, 6rem);
    height: .22rem;
    margin-block-start: .35rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-gold), rgba(245,158,11,.12));
}

html[dir="rtl"] .site-shell-premium > .section-head::after {
    background: linear-gradient(270deg, var(--brand-gold), rgba(245,158,11,.12));
}

/* Contact command centre. */
.contact-workspace-section {
    overflow: hidden;
}

.contact-command-shell {
    padding: clamp(1.15rem, 3vw, 3rem);
}

.contact-section-head {
    max-width: 54rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.6rem);
}

.contact-experience-grid {
    grid-template-columns: minmax(19rem, .88fr) minmax(0, 1.12fr);
    gap: clamp(1rem, 2.4vw, 2rem);
}

.contact-concierge-card,
.contact-form-premium {
    min-height: 100%;
    border-radius: clamp(1.2rem, 2.4vw, 2rem);
}

.contact-panel-topline,
.contact-form-heading {
    display: flex;
    align-items: flex-start;
    gap: clamp(.75rem, 1.5vw, 1rem);
}

.contact-panel-emblem,
.contact-form-emblem {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(3rem, 5vw, 3.8rem);
    height: clamp(3rem, 5vw, 3.8rem);
    border-radius: 1.15rem;
}

.contact-panel-emblem {
    color: #fff;
    border: 1px solid rgba(245,158,11,.25);
    background: linear-gradient(145deg, rgba(245,158,11,.24), rgba(245,158,11,.07));
    box-shadow: 0 18px 40px -24px rgba(245,158,11,.8);
}

.contact-form-emblem {
    color: var(--brand-gold-dark);
    border: 1px solid rgba(245,158,11,.16);
    background: linear-gradient(145deg, #fff7ed, #fffbeb);
}

.contact-form-heading h2,
.contact-form-heading p {
    margin-block-start: 0;
}

.contact-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    margin-block: clamp(1.25rem, 2.3vw, 1.75rem);
}

.contact-quick-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-height: 4.25rem;
    padding: .72rem .82rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    color: #fff;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.contact-quick-action:hover,
.contact-quick-action:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(245,158,11,.35);
    background: rgba(245,158,11,.11);
}

.contact-quick-icon {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .85rem;
    color: var(--brand-gold);
    background: rgba(245,158,11,.12);
}

.contact-quick-whatsapp .contact-quick-icon {
    color: #4ade80;
    background: rgba(34,197,94,.12);
}

.contact-quick-action strong,
.contact-quick-action small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-quick-action strong {
    font-size: clamp(.88rem, 1.1vw, 1rem);
}

.contact-quick-action small {
    margin-top: .15rem;
    color: #cbd5e1;
    font-size: clamp(.72rem, .9vw, .82rem);
}

.contact-details-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form-premium {
    padding: clamp(1.2rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 100% 0, rgba(245,158,11,.08), transparent 19rem),
        linear-gradient(145deg, #fff, #f8fafc);
}

.contact-form-premium .form-grid {
    margin-top: clamp(1.25rem, 2.4vw, 1.85rem);
}

.contact-form-premium .form-field input,
.contact-form-premium .form-field select,
.contact-form-premium .form-field textarea {
    border-radius: .9rem;
    border-color: rgba(15,23,42,.12);
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 32px -28px rgba(15,23,42,.5);
}

.contact-form-premium .form-field input:focus,
.contact-form-premium .form-field select:focus,
.contact-form-premium .form-field textarea:focus {
    border-color: rgba(245,158,11,.65);
    box-shadow: 0 0 0 4px rgba(245,158,11,.11);
}

.contact-map-shell {
    padding: clamp(1.1rem, 2.7vw, 2.6rem);
}

.map-section-head {
    max-width: 50rem;
}

.map-frame-premium {
    min-height: clamp(23rem, 52vw, 34rem);
    border: .55rem solid rgba(255,255,255,.9);
    border-radius: clamp(1.2rem, 2.5vw, 2rem);
    box-shadow: 0 30px 80px -48px rgba(15,23,42,.62);
}

.map-frame-premium iframe {
    height: 100%;
    min-height: inherit;
}

.map-frame-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.07);
}

/* Explicit all-desktop hover/focus tooltip for WhatsApp. */
@media (hover: hover) and (pointer: fine) {
    .floating-whatsapp:hover .floating-tooltip,
    .floating-whatsapp:focus-visible .floating-tooltip,
    .floating-whatsapp:focus-within .floating-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) scale(1) !important;
        transition-delay: 0s !important;
    }
}

@media (max-width: 900px) {
    .contact-experience-grid,
    .contact-details-premium {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .site-shell-premium {
        padding: clamp(.85rem, 4.5vw, 1.25rem);
        border-radius: clamp(1.05rem, 5vw, 1.45rem);
        transform: none !important;
        transition: none !important;
    }

    .site-shell-premium::before {
        opacity: .52;
    }

    .page-hero-content {
        min-height: var(--page-hero-content-min-height);
    }

    .page-hero-copy {
        width: 100%;
    }

    .page-hero-copy > .hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .page-hero-copy > .hero-actions .button {
        width: 100%;
    }

    .contact-quick-action,
    .contact-panel,
    .contact-form-card,
    .map-frame-premium {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    .contact-form-heading {
        align-items: center;
    }
}

@media (max-width: 390px) {
    :root {
        --shell-inline-gutter: .82rem;
    }

    .page-title {
        font-size: clamp(1.95rem, 11vw, 2.65rem);
    }

    .page-lead {
        font-size: .96rem;
        line-height: 1.65;
    }

    .contact-panel-emblem,
    .contact-form-emblem {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-quick-action,
    .site-shell-premium,
    .map-frame-premium {
        transition: none !important;
    }
}

/* ========================================================================== 
   V7 TARGETED ABOUT + FAQ + TRUST + HERO RHYTHM + CTA EXPERIENCE
   Only the requested surfaces are replaced. All typography, spacing and motion
   obey the existing device capability system and shared brand tokens.
   ========================================================================== */

:root {
    --hero-copy-bottom-gap: clamp(1rem, 4vh, 4rem);
    --v7-card-radius: clamp(1.25rem, 2.6vw, 2.25rem);
    --v7-soft-border: rgba(15, 23, 42, .09);
    --v7-gold-border: rgba(245, 158, 11, .22);
}

/* 01. Full-viewport editorial rhythm. Breadcrumb remains at the top while
   every following component receives a measured share of the free height. */
.page-hero-content {
    justify-content: flex-start !important;
}

.page-hero-content > .breadcrumbs {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    min-height: 2.35rem;
    padding: .48rem .7rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    background: rgba(2,6,23,.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.page-hero-copy {
    flex: 0 0 auto;
    margin-block-start: var(--hero-breadcrumb-copy-gap) !important;
    margin-block-end: var(--hero-copy-bottom-gap) !important;
}

.page-hero-copy > .page-badge {
    margin-block-end: var(--hero-badge-title-gap) !important;
}

.page-hero-copy > .page-lead {
    margin-block-start: var(--hero-title-lead-gap) !important;
}

.page-hero-copy > .hero-actions {
    margin-block-start: var(--hero-lead-actions-gap) !important;
}

.page-hero.is-content-constrained .page-hero-copy {
    margin-block-start: clamp(.7rem, 2vh, 1.2rem) !important;
    margin-block-end: clamp(.65rem, 2vh, 1.15rem) !important;
}

/* 02. Trust runway — a separate proof stage, not a flat separator strip. */
.trust-strip.trust-strip-premium {
    position: relative;
    z-index: 4;
    margin-top: 0 !important;
    padding: clamp(2.7rem, 6vw, 5.6rem) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 10%, rgba(245,158,11,.1), transparent 25rem),
        radial-gradient(circle at 92% 95%, rgba(22,163,74,.07), transparent 28rem),
        linear-gradient(180deg, #fff, #f8fafc);
}

.trust-strip.trust-strip-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image:
        linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
    background-size: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.trust-stage {
    position: relative;
}

.trust-stage-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(1.55rem, 3.5vw, 2.8rem);
    text-align: center;
}

.trust-stage-heading-compact {
    min-height: clamp(2.4rem, 5vw, 3.2rem);
}

.trust-stage-kicker,
.cta-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    color: var(--brand-gold-dark);
    font-size: clamp(.72rem, 1vw, .84rem);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}


.trust-grid.trust-grid-premium {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.75rem, 1.6vw, 1.2rem);
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.trust-grid.trust-grid-premium::before {
    content: "";
    position: absolute;
    top: clamp(2.45rem, 5vw, 3.15rem);
    inset-inline: 6%;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,.42), rgba(15,23,42,.12), rgba(245,158,11,.42), transparent);
}

.trust-card {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon index"
        "copy copy";
    align-content: start;
    gap: clamp(.7rem, 1.5vw, 1rem);
    min-height: clamp(13.5rem, 19vw, 16.5rem) !important;
    padding: clamp(1.1rem, 2.2vw, 1.65rem) !important;
    overflow: hidden;
    border: 1px solid var(--v7-soft-border) !important;
    border-radius: var(--v7-card-radius);
    background:
        radial-gradient(circle at 100% 0, rgba(245,158,11,.1), transparent 11rem),
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
    box-shadow:
        0 28px 70px -52px rgba(15,23,42,.68),
        inset 0 1px 0 #fff;
}

.trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(245,158,11,.14), transparent 38%);
    transition: opacity .25s ease;
}

.trust-card::after {
    display: none !important;
}

.trust-card-index {
    grid-area: index;
    justify-self: end;
    color: rgba(15,23,42,.18);
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.trust-card-icon {
    grid-area: icon;
    position: relative;
    display: grid !important;
    place-items: center;
    width: clamp(3.3rem, 5vw, 4rem) !important;
    height: clamp(3.3rem, 5vw, 4rem) !important;
    border: 1px solid rgba(245,158,11,.2);
    border-radius: clamp(1rem, 1.7vw, 1.3rem) !important;
    color: var(--brand-gold-dark) !important;
    background: linear-gradient(145deg, #fff7ed, #fffbeb) !important;
    box-shadow: 0 18px 36px -25px rgba(245,158,11,.85);
}

.trust-card-icon::before {
    content: "";
    position: absolute;
    inset: -.45rem;
    z-index: -1;
    border: 1px solid rgba(245,158,11,.09);
    border-radius: inherit;
}

.trust-card-copy {
    grid-area: copy;
}

.trust-card-copy strong {
    display: block;
    color: var(--brand-dark) !important;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
    line-height: 1.25;
}

.trust-card-copy span {
    display: block;
    margin-top: .62rem !important;
    color: var(--muted) !important;
    font-size: clamp(.86rem, 1.05vw, .98rem) !important;
    line-height: 1.72;
}

.trust-card-line {
    position: absolute;
    inset-inline: 1.3rem;
    bottom: 0;
    height: .22rem;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
    transform: scaleX(.38);
    transform-origin: center;
    opacity: .52;
}

/* 03. About page — editorial story, evidence, values and process roadmap. */
.about-story-stage,
.about-process-stage {
    padding: clamp(1.2rem, 3vw, 3rem);
}

.about-stage-heading,
.about-values-heading,
.about-process-heading {
    max-width: 54rem;
    margin-bottom: clamp(1.5rem, 3.6vw, 3rem);
}

.about-stage-heading h2,
.about-values-heading h2,
.about-process-heading h2 {
    margin: .5rem 0 0;
    color: var(--brand-dark);
    font-size: clamp(1.9rem, 4vw, 3.45rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.about-stage-heading p,
.about-values-heading p,
.about-process-heading p {
    max-width: 48rem;
    margin: .8rem 0 0;
    color: var(--muted);
    line-height: 1.8;
}

.about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(19rem, .98fr);
    align-items: start;
    gap: clamp(1rem, 3.5vw, 3.5rem);
}

.about-story-copy {
    padding: clamp(1.15rem, 2.5vw, 2.2rem);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: clamp(1.15rem, 2.2vw, 1.8rem);
    background: rgba(255,255,255,.75);
    box-shadow: 0 28px 70px -58px rgba(15,23,42,.62);
}

.about-story-copy h2 {
    position: relative;
    padding-inline-start: 1.15rem;
}

.about-story-copy h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .18em;
    bottom: .18em;
    width: .23rem;
    border-radius: 999px;
    background: linear-gradient(var(--brand-gold), rgba(245,158,11,.2));
}

.about-story-visual {
    position: sticky;
    top: calc(var(--runtime-header-height) + 1.25rem);
}

.about-portrait-frame {
    position: relative;
    min-height: clamp(25rem, 48vw, 37rem);
    margin: 0;
    overflow: hidden;
    border: .5rem solid rgba(255,255,255,.92);
    border-radius: clamp(1.35rem, 2.8vw, 2.4rem);
    background: var(--brand-dark);
    box-shadow: 0 38px 90px -52px rgba(15,23,42,.7);
}

.about-portrait-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(2,6,23,.78), transparent 45%);
}

.about-portrait-frame img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.about-portrait-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: clamp(3rem, 8vw, 5rem) clamp(3rem, 8vw, 5rem);
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.about-portrait-frame figcaption {
    position: absolute;
    inset-inline: clamp(1rem, 3vw, 1.7rem);
    bottom: clamp(1rem, 3vw, 1.7rem);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .78rem .9rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 1rem;
    color: #fff;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-weight: 800;
}

.about-stats-deck {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .7rem;
}

.about-stat-card {
    min-width: 0;
    padding: .8rem .55rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 1rem;
    text-align: center;
    background: #fff;
    box-shadow: 0 15px 35px -30px rgba(15,23,42,.65);
}

.about-stat-card strong,
.about-stat-card small {
    display: block;
}

.about-stat-card strong {
    color: var(--brand-gold-dark);
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    line-height: 1;
}

.about-stat-card small {
    margin-top: .38rem;
    color: var(--muted);
    font-size: clamp(.62rem, .9vw, .78rem);
    line-height: 1.35;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.75rem, 1.6vw, 1.15rem);
}

.about-value-card {
    position: relative;
    isolation: isolate;
    min-height: clamp(15rem, 22vw, 18rem);
    padding: clamp(1.15rem, 2.2vw, 1.7rem);
    overflow: hidden;
    border: 1px solid var(--v7-soft-border);
    border-radius: var(--v7-card-radius);
    background:
        radial-gradient(circle at var(--pointer-x, 100%) var(--pointer-y, 0), rgba(245,158,11,.12), transparent 35%),
        linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 28px 70px -54px rgba(15,23,42,.65);
}

.about-value-number {
    position: absolute;
    inset-inline-end: 1rem;
    top: .7rem;
    z-index: -1;
    color: rgba(15,23,42,.06);
    font-size: clamp(3rem, 7vw, 5.8rem);
    font-weight: 900;
    line-height: 1;
}

.about-value-icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid var(--v7-gold-border);
    border-radius: 1.15rem;
    color: var(--brand-gold-dark);
    background: #fff7ed;
}

.about-value-card h3 {
    margin: clamp(1.4rem, 3vw, 2.15rem) 0 0;
    color: var(--brand-dark);
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
}

.about-value-card p {
    margin: .65rem 0 0;
    color: var(--muted);
    line-height: 1.72;
}

.about-process-roadmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.65rem, 1.4vw, 1rem);
}

.about-process-roadmap::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    inset-inline: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,.48), rgba(15,23,42,.12), rgba(245,158,11,.48), transparent);
}

.about-process-card {
    position: relative;
    z-index: 1;
    padding: 0 .2rem;
    text-align: center;
}

.about-process-number {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-inline: auto;
    border: .45rem solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-gold), var(--brand-gold-dark));
    box-shadow: 0 18px 36px -22px rgba(245,158,11,.85);
    font-weight: 900;
}

.about-process-card h3 {
    margin: 1rem 0 0;
    color: var(--brand-dark);
    font-size: clamp(.92rem, 1.2vw, 1.08rem);
}

.about-process-card p {
    margin: .45rem 0 0;
    color: var(--muted);
    font-size: clamp(.78rem, .92vw, .88rem);
    line-height: 1.62;
}

/* 04. FAQ library — premium knowledge architecture with mobile-static behaviour. */
.faq-library-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4.5rem, 9vw, 8.5rem);
    background:
        radial-gradient(circle at 8% 12%, rgba(245,158,11,.11), transparent 28rem),
        radial-gradient(circle at 92% 86%, rgba(22,163,74,.08), transparent 30rem),
        linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f1f5f9 100%);
}

.faq-library-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .44;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
    background-size: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
}

.faq-library-stage {
    position: relative;
    padding: clamp(1rem, 2.7vw, 2.7rem);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: clamp(1.35rem, 3vw, 2.65rem);
    background:
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,250,252,.93));
    box-shadow:
        0 45px 110px -72px rgba(15,23,42,.72),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.faq-library-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(120deg, rgba(245,158,11,.08), transparent 32%, transparent 68%, rgba(22,163,74,.05));
}

.faq-library-stage > * {
    position: relative;
    z-index: 1;
}

.faq-library-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(1rem, 4vw, 3.5rem);
    padding: clamp(.35rem, 1vw, .85rem) clamp(.25rem, 1vw, .75rem) clamp(1.35rem, 3vw, 2.35rem);
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.faq-library-heading {
    max-width: 56rem;
}

.faq-library-heading h2 {
    margin: .55rem 0 0;
    color: var(--brand-dark);
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.045em;
}

.faq-library-heading p {
    max-width: 48rem;
    margin: .9rem 0 0;
    color: var(--muted);
    font-size: clamp(.96rem, 1.35vw, 1.12rem);
    line-height: 1.82;
}

.faq-library-counter {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "icon value"
        "icon label";
    align-items: center;
    column-gap: .85rem;
    min-width: clamp(9rem, 14vw, 12rem);
    padding: clamp(.9rem, 1.8vw, 1.25rem);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: clamp(1rem, 2vw, 1.45rem);
    background:
        radial-gradient(circle at 100% 0, rgba(245,158,11,.16), transparent 8rem),
        linear-gradient(145deg, #fffbeb, #fff);
    box-shadow: 0 24px 55px -42px rgba(245,158,11,.72);
}

.faq-library-counter-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: clamp(2.75rem, 5vw, 3.4rem);
    height: clamp(2.75rem, 5vw, 3.4rem);
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(145deg, #fbbf24, #d97706);
    box-shadow: 0 16px 32px -20px rgba(217,119,6,.8);
}

.faq-library-counter strong {
    grid-area: value;
    color: var(--brand-dark);
    font-size: clamp(1.7rem, 3.2vw, 2.55rem);
    line-height: 1;
}

.faq-library-counter small {
    grid-area: label;
    margin-top: .24rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 850;
}

.faq-library-introduction {
    margin: clamp(1.2rem, 2.6vw, 2rem) 0 0;
    padding: clamp(1rem, 2vw, 1.55rem) clamp(1rem, 2.3vw, 1.8rem);
    border-inline-start: .24rem solid var(--brand-gold);
    border-radius: clamp(.9rem, 1.8vw, 1.25rem);
    color: var(--muted);
    background: rgba(255,255,255,.72);
}

.faq-library-introduction h2 {
    color: var(--brand-dark);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.faq-library-search-dock {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.55rem, 1.4vw, .9rem);
    margin: clamp(1.35rem, 3vw, 2.35rem) 0;
    padding: clamp(.42rem, .8vw, .58rem);
    border: 1px solid rgba(15,23,42,.09);
    border-radius: clamp(1.15rem, 2.2vw, 1.65rem);
    background:
        radial-gradient(circle at 7% 0, rgba(245,158,11,.11), transparent 12rem),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    box-shadow:
        0 30px 70px -52px rgba(15,23,42,.78),
        inset 0 1px 0 rgba(255,255,255,.92);
    transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.faq-library-search-dock::before {
    position: absolute;
    z-index: -1;
    inset: -.08rem;
    border-radius: inherit;
    content: "";
    background: linear-gradient(105deg, rgba(245,158,11,.22), transparent 28%, transparent 72%, rgba(15,23,42,.08));
    opacity: .38;
    pointer-events: none;
}

.faq-library-search-dock.is-revealed:focus-within {
    border-color: rgba(217,119,6,.3);
    box-shadow:
        0 34px 82px -50px rgba(15,23,42,.82),
        0 0 0 .25rem rgba(245,158,11,.07),
        inset 0 1px 0 rgba(255,255,255,.96);
    transform: translateY(-1px);
}

.faq-library-search-field {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.65rem, 1.4vw, .9rem);
    min-height: clamp(3.65rem, 6vw, 4.2rem);
    padding-block: .38rem;
    padding-inline: clamp(.65rem, 1.8vw, .9rem) clamp(.48rem, 1.2vw, .68rem);
    border: 1px solid rgba(15,23,42,.085);
    border-radius: clamp(.92rem, 1.8vw, 1.18rem);
    background: rgba(255,255,255,.96);
    box-shadow:
        0 16px 36px -31px rgba(15,23,42,.72),
        inset 0 1px 0 #fff;
    cursor: text;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.faq-library-search-field:focus-within {
    border-color: rgba(217,119,6,.44);
    background: #fff;
    box-shadow:
        0 0 0 .24rem rgba(245,158,11,.075),
        0 23px 48px -38px rgba(15,23,42,.74),
        inset 0 1px 0 #fff;
}

.faq-library-search-icon {
    display: grid;
    width: clamp(2.45rem, 4vw, 2.85rem);
    height: clamp(2.45rem, 4vw, 2.85rem);
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(245,158,11,.18);
    border-radius: clamp(.72rem, 1.4vw, .9rem);
    color: var(--brand-gold-dark);
    background: linear-gradient(145deg, #fffbeb, #fff7ed);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.faq-library-search-icon .icon {
    width: clamp(1rem, 1.8vw, 1.15rem);
    height: clamp(1rem, 1.8vw, 1.15rem);
}

.faq-library-search-field input {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--brand-dark);
    background: transparent;
    font: inherit;
    font-size: clamp(.94rem, 1.5vw, 1.05rem);
    font-weight: 700;
    line-height: 1.4;
    caret-color: var(--brand-gold-dark);
}

.faq-library-search-field input::placeholder {
    color: #94a3b8;
    font-weight: 620;
    opacity: 1;
}

.faq-library-search-field input::-webkit-search-cancel-button {
    display: none;
}

.faq-library-search-clear {
    display: grid;
    width: clamp(2.35rem, 4vw, 2.7rem);
    height: clamp(2.35rem, 4vw, 2.7rem);
    place-items: center;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: clamp(.7rem, 1.3vw, .86rem);
    color: #64748b;
    background: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.faq-library-search-clear:hover,
.faq-library-search-clear:focus-visible {
    border-color: rgba(217,119,6,.22);
    color: var(--brand-gold-dark);
    background: #fffbeb;
    transform: translateY(-1px);
}

.faq-library-search-clear:focus-visible {
    outline: .2rem solid rgba(245,158,11,.12);
    outline-offset: .12rem;
}


.faq-library-search-clear[hidden] {
    display: none;
}

.faq-library-search-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .58rem;
    min-width: clamp(9rem, 15vw, 12rem);
    min-height: clamp(3.25rem, 5.5vw, 3.7rem);
    padding-inline: clamp(.85rem, 1.8vw, 1.15rem);
    border: 1px solid rgba(15,23,42,.07);
    border-radius: clamp(.88rem, 1.7vw, 1.1rem);
    color: #334155;
    background: rgba(255,255,255,.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
    font-size: clamp(.75rem, 1.15vw, .84rem);
    font-weight: 850;
    line-height: 1.3;
    text-align: center;
}

.faq-library-live-dot {
    position: relative;
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border: .12rem solid #dcfce7;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 .22rem rgba(34,197,94,.1);
}

.faq-library-live-dot::after {
    position: absolute;
    inset: -.28rem;
    border: 1px solid rgba(34,197,94,.24);
    border-radius: inherit;
    content: "";
    animation: faqSearchLive 2.2s ease-out infinite;
}

@keyframes faqSearchLive {
    0%, 35% { opacity: .7; transform: scale(.68); }
    100% { opacity: 0; transform: scale(1.45); }
}

.faq-library-layout {
    display: grid;
    grid-template-columns: minmax(17.5rem, .34fr) minmax(0, .66fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2.6rem);
}

.faq-library-guide {
    position: sticky;
    top: calc(var(--runtime-header-height) + 1.2rem);
}

.faq-library-guide-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.25rem, 2.6vw, 2.1rem);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: clamp(1.2rem, 2.6vw, 2rem);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(245,158,11,.27), transparent 15rem),
        linear-gradient(145deg, #0f172a, #020617 76%);
    box-shadow: 0 38px 85px -55px rgba(2,6,23,.94);
}

.faq-library-guide-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 3rem 3rem;
    mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.faq-library-guide-emblem {
    display: grid;
    place-items: center;
    width: 4.15rem;
    height: 4.15rem;
    margin-bottom: 1.4rem;
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 1.25rem;
    color: var(--brand-gold);
    background: rgba(245,158,11,.1);
}

.faq-library-guide-panel h2 {
    margin: .5rem 0 0;
    color: #fff;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.12;
}

.faq-library-guide-panel > p {
    margin: .8rem 0 0;
    color: #cbd5e1;
    line-height: 1.75;
}

.faq-library-guide-list {
    display: grid;
    gap: .7rem;
    margin-block: 1.45rem;
}

.faq-library-guide-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: .68rem;
    padding: .78rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1rem;
    background: rgba(255,255,255,.05);
}

.faq-library-guide-number {
    color: rgba(255,255,255,.36);
    font-size: .7rem;
    font-weight: 900;
}

.faq-library-guide-icon {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .78rem;
    color: var(--brand-gold);
    background: rgba(245,158,11,.11);
}

.faq-library-guide-item strong,
.faq-library-guide-item small {
    display: block;
}

.faq-library-guide-item strong {
    color: #fff;
    font-size: .9rem;
}

.faq-library-guide-item small {
    margin-top: .2rem;
    color: #94a3b8;
    line-height: 1.48;
}

.faq-library-guide-cta {
    width: 100%;
}

.faq-library-answers {
    min-width: 0;
}

.faq-library-answers-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-inline: .15rem;
}

.faq-library-answers-head h2 {
    margin: .45rem 0 0;
    color: var(--brand-dark);
    font-size: clamp(1.45rem, 2.8vw, 2.2rem);
    line-height: 1.12;
}

.faq-library-visible-count {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(245,158,11,.23);
    border-radius: .95rem;
    color: var(--brand-gold-dark);
    background: #fff7ed;
    font-weight: 900;
}

.faq-list.faq-library-list {
    display: grid;
    max-width: none;
    gap: .78rem;
}

.faq-item.faq-library-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.1);
    border-radius: clamp(1rem, 2vw, 1.45rem);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    box-shadow: 0 20px 48px -42px rgba(15,23,42,.62);
}

.faq-item.faq-library-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 1rem;
    bottom: 1rem;
    width: .22rem;
    border-radius: 999px;
    opacity: .34;
    background: linear-gradient(var(--brand-gold), var(--brand-gold-dark));
    transition: opacity .25s ease, top .25s ease, bottom .25s ease;
}

.faq-item.faq-library-item.is-open {
    border-color: rgba(245,158,11,.35);
    background:
        radial-gradient(circle at 100% 0, rgba(245,158,11,.08), transparent 12rem),
        linear-gradient(145deg, #fff, #fffbeb);
    box-shadow: 0 28px 64px -48px rgba(217,119,6,.5);
}

.faq-item.faq-library-item.is-open::before {
    top: 0;
    bottom: 0;
    opacity: 1;
}

.faq-item.faq-library-item[hidden] {
    display: none !important;
}

.faq-library-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.72rem, 1.6vw, 1rem);
    width: 100%;
    min-height: clamp(4.5rem, 7vw, 5.4rem);
    padding: clamp(.9rem, 1.8vw, 1.25rem);
    border: 0;
    text-align: start;
    background: transparent;
}

.faq-library-question-index {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .82rem;
    color: var(--brand-gold-dark);
    background: #fff7ed;
    font-size: .78rem;
    font-weight: 900;
}

.faq-library-button .faq-question-text {
    color: var(--brand-dark);
    font-size: clamp(.95rem, 1.25vw, 1.08rem);
    font-weight: 900;
    line-height: 1.45;
}

.faq-library-toggle {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: .8rem;
    color: var(--brand-dark);
    background: #f1f5f9;
    transition: transform .24s ease, color .24s ease, background .24s ease;
}

.faq-library-item.is-open .faq-library-toggle {
    color: #fff;
    background: var(--brand-gold-dark);
    transform: rotate(180deg);
}

.faq-library-panel {
    padding: 0;
}

.faq-library-item.is-open .faq-button .icon {
    transform: none;
}

.faq-library-panel-inner {
    padding: 0 clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.45rem);
    color: var(--muted);
    line-height: 1.8;
}

.faq-library-panel-inner::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
}

.faq-library-empty {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px dashed rgba(15,23,42,.18);
    border-radius: clamp(1.1rem, 2.3vw, 1.7rem);
    text-align: center;
    background: rgba(255,255,255,.76);
}

.faq-library-empty > span {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-inline: auto;
    border-radius: 1.2rem;
    color: var(--brand-gold-dark);
    background: #fff7ed;
}

.faq-library-empty h3 {
    margin: 1rem 0 0;
    color: var(--brand-dark);
}

.faq-library-empty p {
    max-width: 32rem;
    margin: .5rem auto 0;
    color: var(--muted);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .faq-library-guide-item {
        transition: transform .25s ease, border-color .25s ease, background .25s ease;
    }

    .faq-library-guide-item:hover {
        transform: translateY(-.18rem);
        border-color: rgba(245,158,11,.24);
        background: rgba(255,255,255,.075);
    }

    .faq-library-item {
        transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .faq-library-item:hover {
        transform: translateY(-.18rem);
        border-color: rgba(245,158,11,.24);
        box-shadow: 0 28px 64px -50px rgba(15,23,42,.7);
    }
}

@media (max-width: 1023px) {
    .faq-library-section {
        padding-block: clamp(3.5rem, 11vw, 5.4rem);
    }

    .faq-library-masthead,
    .faq-library-layout {
        grid-template-columns: 1fr;
    }

    .faq-library-counter {
        width: 100%;
        max-width: 15rem;
    }

    .faq-library-guide {
        position: static;
    }

    .faq-library-guide-panel {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .7rem 1rem;
    }

    .faq-library-guide-emblem {
        grid-row: 1 / span 2;
        margin: 0;
    }

    .faq-library-guide-panel > .section-kicker,
    .faq-library-guide-panel > h2,
    .faq-library-guide-panel > p,
    .faq-library-guide-list,
    .faq-library-guide-cta {
        grid-column: 1 / -1;
    }

    .faq-library-guide-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .faq-library-guide-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .faq-library-guide-number {
        display: none;
    }

    .faq-library-stage *,
    .faq-library-stage *::before,
    .faq-library-stage *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 720px) {
    .faq-library-stage {
        padding: .85rem;
        border-radius: 1.25rem;
    }

    .faq-library-masthead {
        padding: .25rem .1rem 1.15rem;
    }

    .faq-library-heading h2 {
        font-size: clamp(1.8rem, 9vw, 2.65rem);
    }

    .faq-library-counter {
        max-width: none;
    }

    .faq-library-search-dock {
        grid-template-columns: minmax(0, 1fr);
        gap: .48rem;
        padding: .4rem;
        border-radius: 1.15rem;
    }

    .faq-library-search-dock.is-revealed:focus-within {
        transform: none;
    }

    .faq-library-search-field {
        min-height: 3.55rem;
        gap: .58rem;
        padding-block: .32rem;
        padding-inline: .55rem .42rem;
        border-radius: .9rem;
    }

    .faq-library-search-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: .72rem;
    }

    .faq-library-search-field input {
        min-height: 2.5rem;
        font-size: .92rem;
    }

    .faq-library-search-clear {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: .7rem;
    }

    .faq-library-search-result {
        justify-content: flex-start;
        min-width: 0;
        min-height: 2.65rem;
        padding-inline: .78rem;
        border-radius: .82rem;
        text-align: start;
    }

    .faq-library-guide-panel {
        display: block;
        padding: 1.1rem;
    }

    .faq-library-guide-emblem {
        margin-bottom: 1rem;
    }

    .faq-library-guide-list {
        grid-template-columns: 1fr;
    }

    .faq-library-answers-head {
        align-items: center;
    }

    .faq-library-button {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .58rem;
        padding: .82rem;
    }

    .faq-library-question-index {
        width: 2.25rem;
        height: 2.25rem;
    }

    .faq-library-toggle {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* 05. Conversion-focused CTA shell used by “Planning a renovation…” blocks. */
.cta-shell {
    position: relative;
}

.cta-panel.cta-panel-premium {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, auto);
    align-items: center;
    gap: clamp(1.4rem, 4vw, 4.5rem);
    min-height: clamp(22rem, 38vw, 31rem);
    padding: clamp(1.5rem, 4.5vw, 4.5rem);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: clamp(1.5rem, 3.4vw, 3rem);
    color: #fff;
    background:
        radial-gradient(circle at 92% 12%, rgba(245,158,11,.28), transparent 24rem),
        radial-gradient(circle at 4% 92%, rgba(22,163,74,.14), transparent 24rem),
        linear-gradient(135deg, #020617, #0f172a 58%, #111827);
    box-shadow:
        0 48px 110px -62px rgba(2,6,23,.95),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.cta-panel.cta-panel-premium::before,
.cta-panel.cta-panel-premium::after {
    display: none;
}

.cta-panel-visual,
.cta-panel-grid,
.cta-panel-orbit {
    position: absolute;
    pointer-events: none;
}

.cta-panel-visual,
.cta-panel-grid {
    inset: 0;
}

.cta-panel-grid {
    opacity: .14;
    background-image:
        linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem);
    mask-image: radial-gradient(circle at 75% 30%, #000, transparent 66%);
}

.cta-panel-orbit {
    border: 1px solid rgba(245,158,11,.18);
    border-radius: 50%;
}

.cta-panel-orbit-one {
    width: clamp(15rem, 36vw, 30rem);
    height: clamp(15rem, 36vw, 30rem);
    inset-inline-end: clamp(-9rem, -10vw, -4rem);
    top: clamp(-9rem, -9vw, -4rem);
}

.cta-panel-orbit-two {
    width: clamp(9rem, 22vw, 18rem);
    height: clamp(9rem, 22vw, 18rem);
    inset-inline-end: clamp(-2rem, 3vw, 5rem);
    top: clamp(2rem, 8vw, 7rem);
}

.cta-panel-content,
.cta-panel-action-zone {
    position: relative;
    z-index: 2;
}

.cta-panel-content {
    max-width: 48rem;
}

.cta-panel-kicker {
    padding: .5rem .72rem;
    border: 1px solid rgba(245,158,11,.22);
    border-radius: 999px;
    color: #fbbf24;
    background: rgba(245,158,11,.08);
    letter-spacing: .06em;
    text-transform: none;
}

.cta-panel.cta-panel-premium h2 {
    max-width: 46rem;
    margin: clamp(1rem, 2.4vw, 1.75rem) 0 0;
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.cta-panel.cta-panel-premium p {
    max-width: 42rem;
    margin: clamp(.9rem, 1.8vw, 1.35rem) 0 0;
    color: #cbd5e1;
    font-size: clamp(.98rem, 1.45vw, 1.15rem);
    line-height: 1.8;
}

.cta-proof-list {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: clamp(1rem, 2.4vw, 1.75rem);
}

.cta-proof-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .62rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: .75rem;
    color: #e2e8f0;
    background: rgba(255,255,255,.045);
    font-size: clamp(.72rem, .9vw, .82rem);
    font-weight: 800;
}

.cta-proof-item .icon {
    color: var(--brand-gold);
}

.cta-panel-action-zone {
    display: grid;
    justify-items: stretch;
    gap: .8rem;
    width: min(100%, 23rem);
    padding: clamp(1rem, 2vw, 1.45rem);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: clamp(1.1rem, 2vw, 1.55rem);
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.cta-response-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 800;
}

.cta-response-note .icon {
    color: var(--brand-gold);
}

.cta-panel-premium .cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
}

.cta-panel-premium .cta-actions .button {
    width: 100%;
    min-height: 3.35rem;
}

/* Desktop interaction only. */
@media (min-width: 1081px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .trust-card,
    .about-value-card,
    .faq-item-premium,
    .cta-panel-action-zone {
        transition: transform .3s var(--ease-standard), border-color .3s ease, box-shadow .3s ease;
    }

    .trust-card:hover {
        transform: translateY(-.45rem);
        border-color: rgba(245,158,11,.28) !important;
        box-shadow: 0 40px 85px -50px rgba(15,23,42,.72);
    }

    .trust-card:hover::before {
        opacity: 1;
    }

    .trust-card:hover .trust-card-line {
        transform: scaleX(1);
        opacity: 1;
    }

    .about-value-card:hover {
        transform: translateY(-.42rem);
        border-color: rgba(245,158,11,.28);
        box-shadow: 0 42px 88px -52px rgba(15,23,42,.7);
    }

    .faq-item-premium:hover {
        transform: translateY(-.12rem);
        border-color: rgba(245,158,11,.25);
    }

    .cta-panel-action-zone:hover {
        transform: translateY(-.25rem);
        border-color: rgba(245,158,11,.25);
    }
}

@media (max-width: 1080px) {
    .trust-stage-heading {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .trust-grid.trust-grid-premium,
    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-grid.trust-grid-premium::before {
        display: none;
    }

    .about-story-grid,
    .faq-knowledge-layout,
    .cta-panel.cta-panel-premium {
        grid-template-columns: 1fr;
    }

    .about-story-visual,
    .faq-guide-rail {
        position: relative;
        top: auto;
    }

    .about-process-roadmap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.5rem;
    }

    .about-process-roadmap::before {
        display: none;
    }

    .cta-panel-action-zone {
        width: min(100%, 38rem);
    }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .page-hero-content > .breadcrumbs {
        min-height: 2.15rem;
        padding: .4rem .6rem;
    }

    .trust-strip.trust-strip-premium {
        padding: clamp(2.1rem, 9vw, 3.4rem) 0;
    }

    .trust-grid.trust-grid-premium,
    .about-values-grid,
    .about-stats-deck,
    .about-process-roadmap {
        grid-template-columns: 1fr;
    }

    .trust-card {
        min-height: 0 !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon copy index";
        align-items: center;
    }

    .trust-card-copy span {
        line-height: 1.58;
    }

    .about-story-stage,
    .about-process-stage,
    .faq-command-shell {
        padding: clamp(.85rem, 4.5vw, 1.25rem);
    }

    .about-portrait-frame {
        min-height: clamp(21rem, 110vw, 31rem);
    }

    .about-stats-deck {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-value-card {
        min-height: 0;
    }

    .about-process-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: .85rem;
        padding: .85rem;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 1rem;
        text-align: start;
        background: #fff;
    }

    .about-process-number {
        width: 3.2rem;
        height: 3.2rem;
        margin: 0;
        border-width: .28rem;
    }

    .about-process-card h3 {
        margin-top: .1rem;
    }

    .faq-experience-heading,
    .faq-search-bar {
        grid-template-columns: 1fr;
    }

    .faq-count-card {
        grid-template-columns: auto auto;
        justify-content: center;
        gap: .5rem;
        min-width: 0;
        min-height: 0;
        width: fit-content;
        padding: .65rem .85rem;
        border-radius: .9rem;
    }

    .faq-count-card span {
        margin: 0;
    }

    .faq-search-status {
        min-width: 0;
        text-align: start;
    }

    .faq-guide-card,
    .faq-item-premium,
    .cta-panel.cta-panel-premium,
    .cta-panel-action-zone,
    .trust-card,
    .about-value-card,
    .about-process-card {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    .faq-item-premium .faq-button {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: .82rem;
    }

    .faq-question-number {
        width: 2.2rem;
        height: 2.2rem;
    }

    .faq-question-toggle {
        width: 2.1rem;
        height: 2.1rem;
    }

    .cta-panel.cta-panel-premium {
        min-height: 0;
        padding: clamp(1.15rem, 6vw, 1.75rem);
        border-radius: clamp(1.25rem, 6vw, 1.8rem);
    }

    .cta-panel.cta-panel-premium h2 {
        font-size: clamp(2rem, 11vw, 3.25rem);
    }

    .cta-proof-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cta-panel-orbit {
        display: none;
    }
}

@media (max-width: 390px) {
    .trust-card {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon index"
            "copy copy";
    }

    .faq-item-premium .faq-button {
        gap: .55rem;
    }

    .faq-question-text {
        font-size: .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-card,
    .about-value-card,
    .faq-item-premium,
    .cta-panel-action-zone,
    .trust-card-line,
    .faq-question-toggle,
    .faq-library-search-dock,
    .faq-library-search-field,
    .faq-library-search-clear {
        transition: none !important;
    }

    .faq-library-live-dot::after {
        animation: none !important;
    }
}


/* -------------------------------------------------------------------------- */
/* V14 MOBILE FAIL-SAFE + ACCESSIBILITY                                       */
/* -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

.reveal-enabled [data-reveal].is-revealed {
    will-change: auto;
}

/* Content is never hidden on touch devices, reduced-motion devices, or when
   JavaScript/IntersectionObserver initialization fails. */
@media (max-width: 760px), (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
    .reveal-enabled [data-reveal],
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}


/* -------------------------------------------------------------------------- */
/* V15 RTL VIEWPORT STABILITY + SHARED PERFORMANCE/ACCESSIBILITY               */
/* -------------------------------------------------------------------------- */

/* Keep the physical browser scrollbar on the conventional right edge while
   preserving semantic/content RTL on the body. This prevents the 15px left
   gutter and viewport displacement seen on Hebrew mobile/Lighthouse renders. */
html[dir="rtl"] {
    direction: ltr;
}

html[dir="rtl"] body {
    direction: rtl;
}

html,
body.site-body {
    inline-size: 100%;
    max-inline-size: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body.site-body {
        overflow-x: hidden;
    }
}

body.site-body,
.page-main,
.page-main > main,
.page-main > section,
.site-shell,
.site-shell-premium,
.header-inner,
.footer-inner {
    min-inline-size: 0;
}

/* Closed off-canvas navigation must never participate in document overflow. */
.mobile-navigation[aria-hidden="true"] {
    contain: layout paint style;
}

.mobile-navigation[aria-hidden="true"] .mobile-navigation-panel {
    visibility: hidden;
}

/* Stable system typography: no late external-font metric swap on mobile. */
body.site-body,
button,
input,
select,
textarea {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
}

/* WCAG-friendly keyboard indication remains visible in forced-colour mode. */
@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 2px solid CanvasText !important;
        outline-offset: 3px !important;
    }

    .button,
    .header-call,
    .mobile-call,
    .floating-action {
        border: 1px solid ButtonText;
    }
}

/* Touch controls retain a dependable target without enlarging inline links. */
@media (hover: none), (pointer: coarse) {
    :where(button, input, select, textarea, summary),
    .button,
    .header-call,
    .mobile-call,
    .floating-action,
    .pagination a,
    .pagination span {
        min-block-size: 44px;
    }
}