{"id":10,"date":"2026-05-22T07:17:21","date_gmt":"2026-05-22T07:17:21","guid":{"rendered":"https:\/\/jewelgeorgeanto.co.in\/forge\/?page_id=10"},"modified":"2026-05-22T07:19:06","modified_gmt":"2026-05-22T07:19:06","slug":"elementor-10","status":"publish","type":"page","link":"https:\/\/jewelgeorgeanto.co.in\/forge\/","title":{"rendered":"Elementor #10"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nForge Studio \u2014 Design & Development<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --ink: #0d0d0b;\n --bone: #f5f2eb;\n --rust: #c84b2a;\n --rust-muted: #e8c4b8;\n --charcoal: #2a2a26;\n --slate: #8a8a82;\n --line: rgba(13,13,11,0.12);\n --ff-display: 'Bebas Neue', sans-serif;\n --ff-serif: 'DM Serif Display', serif;\n --ff-sans: 'Instrument Sans', sans-serif;\n --ff-mono: 'DM Mono', monospace;\n }\n\n html { font-size: 16px; scroll-behavior: smooth; }\n\n body {\n background: var(--bone);\n color: var(--ink);\n font-family: var(--ff-sans);\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500\u2500 DESIGN SYSTEM TOKENS \u2500\u2500\u2500 *\/\n .ds-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--slate);\n }\n\n .ds-h1 {\n font-family: var(--ff-display);\n font-size: clamp(72px, 12vw, 160px);\n line-height: 0.9;\n letter-spacing: 0.02em;\n color: var(--ink);\n }\n\n .ds-h2 {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 4vw, 48px);\n line-height: 1.1;\n font-style: italic;\n color: var(--ink);\n }\n\n .ds-h3 {\n font-family: var(--ff-display);\n font-size: clamp(36px, 5vw, 64px);\n letter-spacing: 0.03em;\n line-height: 0.95;\n }\n\n .ds-body {\n font-size: 15px;\n line-height: 1.75;\n color: var(--charcoal);\n }\n\n .ds-caption {\n font-family: var(--ff-mono);\n font-size: 12px;\n color: var(--slate);\n }\n\n \/* \u2500\u2500\u2500 LAYOUT \u2500\u2500\u2500 *\/\n .container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }\n @media (max-width: 768px) { .container { padding: 0 24px; } }\n\n hr.rule {\n border: none;\n border-top: 1px solid var(--line);\n margin: 0;\n }\n\n \/* \u2500\u2500\u2500 NAV \u2500\u2500\u2500 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 100;\n background: rgba(245,242,235,0.9);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid var(--line);\n }\n\n .nav-inner {\n max-width: 1280px; margin: 0 auto; padding: 0 48px;\n height: 56px;\n display: flex; align-items: center; justify-content: space-between;\n }\n\n .nav-logo {\n font-family: var(--ff-display);\n font-size: 22px;\n letter-spacing: 0.08em;\n color: var(--ink);\n text-decoration: none;\n }\n\n .nav-logo span { color: var(--rust); }\n\n .nav-links {\n display: flex; gap: 32px; list-style: none;\n }\n\n .nav-links a {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--slate);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .nav-links a:hover { color: var(--ink); }\n\n .nav-cta {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--bone);\n background: var(--ink);\n border: none;\n padding: 10px 20px;\n cursor: pointer;\n text-decoration: none;\n transition: background 0.2s;\n }\n\n .nav-cta:hover { background: var(--rust); }\n\n @media (max-width: 768px) {\n .nav-links { display: none; }\n .nav-inner { padding: 0 24px; }\n }\n\n \/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n .hero {\n padding-top: 120px;\n min-height: 100vh;\n display: flex; flex-direction: column; justify-content: flex-end;\n padding-bottom: 64px;\n position: relative;\n overflow: hidden;\n }\n\n .hero-eyebrow {\n display: flex; align-items: center; gap: 16px;\n margin-bottom: 24px;\n }\n\n .hero-badge {\n display: inline-flex; align-items: center; gap: 8px;\n border: 1px solid var(--line);\n padding: 6px 14px;\n background: white;\n }\n\n .hero-badge-dot {\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--rust);\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n .hero-title-wrap {\n position: relative;\n overflow: visible;\n }\n\n .hero-title {\n font-family: var(--ff-display);\n font-size: clamp(96px, 16vw, 220px);\n line-height: 0.88;\n letter-spacing: 0.01em;\n color: var(--ink);\n display: block;\n }\n\n .hero-title-italic {\n font-family: var(--ff-serif);\n font-style: italic;\n font-size: clamp(52px, 8vw, 108px);\n line-height: 1;\n color: var(--rust);\n display: block;\n padding-left: 12%;\n }\n\n .hero-subgrid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n margin-top: 64px;\n padding-top: 40px;\n border-top: 1px solid var(--line);\n align-items: end;\n }\n\n .hero-desc { max-width: 400px; }\n .hero-desc p { font-size: 16px; line-height: 1.7; color: var(--charcoal); }\n\n .hero-stats {\n display: flex; gap: 48px; justify-content: flex-end; align-items: flex-end;\n }\n\n .stat-item { text-align: right; }\n .stat-num {\n font-family: var(--ff-display);\n font-size: 52px;\n line-height: 1;\n color: var(--ink);\n }\n .stat-num sup { font-size: 24px; vertical-align: super; }\n\n .hero-scroll {\n position: absolute; right: 48px; top: 50%;\n transform: translateY(-50%);\n display: flex; flex-direction: column; align-items: center; gap: 12px;\n }\n\n .scroll-line {\n width: 1px; height: 80px;\n background: var(--line);\n position: relative; overflow: hidden;\n }\n\n .scroll-line::after {\n content: '';\n position: absolute; top: -100%; left: 0; right: 0;\n height: 100%; background: var(--rust);\n animation: scrollDown 1.5s ease-in-out infinite;\n }\n\n @keyframes scrollDown {\n 0% { top: -100%; }\n 100% { top: 100%; }\n }\n\n @media (max-width: 768px) {\n .hero-subgrid { grid-template-columns: 1fr; }\n .hero-stats { justify-content: flex-start; }\n .hero-scroll { display: none; }\n }\n\n \/* \u2500\u2500\u2500 SECTION HEADER \u2500\u2500\u2500 *\/\n .section-header {\n display: flex; align-items: flex-end;\n justify-content: space-between;\n padding: 80px 0 48px;\n gap: 32px;\n }\n\n .section-link {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--slate);\n text-decoration: none;\n border-bottom: 1px solid var(--line);\n padding-bottom: 2px;\n transition: color 0.2s, border-color 0.2s;\n white-space: nowrap;\n align-self: flex-end;\n margin-bottom: 4px;\n }\n\n .section-link:hover { color: var(--rust); border-color: var(--rust); }\n\n \/* \u2500\u2500\u2500 PROJECTS \u2500\u2500\u2500 *\/\n #projects { padding-bottom: 80px; }\n\n .projects-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2px;\n }\n\n .project-card {\n position: relative;\n overflow: hidden;\n background: var(--ink);\n cursor: pointer;\n group: true;\n }\n\n .project-card:first-child {\n grid-column: 1 \/ -1;\n }\n\n .project-thumb {\n width: 100%;\n aspect-ratio: 16\/9;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease, opacity 0.4s;\n opacity: 0.85;\n }\n\n .project-card:first-child .project-thumb {\n aspect-ratio: 21\/9;\n }\n\n .project-card:hover .project-thumb {\n transform: scale(1.04);\n opacity: 0.7;\n }\n\n .project-overlay {\n position: absolute;\n inset: 0;\n padding: 32px;\n display: flex; flex-direction: column; justify-content: flex-end;\n background: linear-gradient(to top, rgba(13,13,11,0.9) 0%, transparent 60%);\n }\n\n .project-tags {\n display: flex; gap: 8px; flex-wrap: wrap;\n margin-bottom: 12px;\n }\n\n .project-tag {\n font-family: var(--ff-mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: rgba(245,242,235,0.6);\n border: 1px solid rgba(245,242,235,0.2);\n padding: 4px 10px;\n }\n\n .project-name {\n font-family: var(--ff-display);\n font-size: clamp(28px, 4vw, 52px);\n color: var(--bone);\n line-height: 1;\n letter-spacing: 0.02em;\n }\n\n .project-sub {\n font-size: 13px;\n color: rgba(245,242,235,0.6);\n margin-top: 6px;\n font-family: var(--ff-mono);\n }\n\n .project-arrow {\n position: absolute; top: 24px; right: 24px;\n width: 40px; height: 40px;\n border: 1px solid rgba(245,242,235,0.3);\n display: flex; align-items: center; justify-content: center;\n color: var(--bone);\n font-size: 18px;\n transition: background 0.2s, border-color 0.2s;\n opacity: 0;\n transform: translateY(-4px);\n transition: opacity 0.3s, transform 0.3s;\n }\n\n .project-card:hover .project-arrow {\n opacity: 1; transform: translateY(0);\n background: var(--rust); border-color: var(--rust);\n }\n\n @media (max-width: 768px) {\n .projects-grid { grid-template-columns: 1fr; }\n .project-card:first-child { grid-column: auto; }\n }\n\n \/* \u2500\u2500\u2500 ABOUT \u2500\u2500\u2500 *\/\n #about {\n padding: 120px 0;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n border-top: 1px solid var(--line);\n }\n\n .about-visual {\n position: relative;\n }\n\n .about-portrait {\n width: 100%;\n aspect-ratio: 3\/4;\n background: var(--charcoal);\n overflow: hidden;\n position: relative;\n }\n\n .portrait-placeholder {\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 10px,\n rgba(255,255,255,0.02) 10px,\n rgba(255,255,255,0.02) 20px\n );\n }\n\n .portrait-monogram {\n font-family: var(--ff-display);\n font-size: 120px;\n letter-spacing: 0.05em;\n color: rgba(255,255,255,0.08);\n user-select: none;\n }\n\n .about-tag-float {\n position: absolute;\n bottom: -20px; right: -20px;\n background: var(--rust);\n padding: 24px 28px;\n color: var(--bone);\n }\n\n .about-tag-float .ds-label { color: rgba(245,242,235,0.7); margin-bottom: 4px; }\n\n .about-content {\n display: flex; flex-direction: column; justify-content: center;\n padding: 40px 0;\n }\n\n .about-content .ds-label { margin-bottom: 24px; }\n\n .about-title {\n font-family: var(--ff-serif);\n font-size: clamp(32px, 4vw, 52px);\n line-height: 1.15;\n margin-bottom: 32px;\n }\n\n .about-title em { color: var(--rust); }\n\n .about-body { font-size: 15px; line-height: 1.8; color: var(--charcoal); margin-bottom: 48px; }\n\n .skills-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 2px;\n margin-bottom: 48px;\n }\n\n .skill-cell {\n padding: 16px;\n border: 1px solid var(--line);\n }\n\n .skill-name {\n font-family: var(--ff-mono);\n font-size: 12px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--ink);\n margin-bottom: 6px;\n }\n\n .skill-bar-wrap {\n height: 2px;\n background: var(--line);\n overflow: hidden;\n }\n\n .skill-bar {\n height: 100%;\n background: var(--rust);\n transform-origin: left;\n animation: growBar 1.2s ease forwards;\n transform: scaleX(0);\n }\n\n @keyframes growBar {\n to { transform: scaleX(1); }\n }\n\n @media (max-width: 768px) {\n #about { grid-template-columns: 1fr; gap: 40px; }\n .about-tag-float { display: none; }\n }\n\n \/* \u2500\u2500\u2500 DESIGN SYSTEM SHOWCASE \u2500\u2500\u2500 *\/\n #design-system {\n padding: 120px 0;\n background: var(--ink);\n color: var(--bone);\n overflow: hidden;\n }\n\n .ds-header {\n padding: 0 48px;\n margin-bottom: 80px;\n display: flex; align-items: flex-end; justify-content: space-between;\n max-width: 1280px; margin-left: auto; margin-right: auto;\n }\n\n .ds-header .ds-label { color: rgba(245,242,235,0.4); margin-bottom: 16px; }\n\n .ds-title {\n font-family: var(--ff-display);\n font-size: clamp(52px, 8vw, 100px);\n line-height: 0.9;\n letter-spacing: 0.02em;\n color: var(--bone);\n }\n\n .ds-scroll-track {\n display: flex;\n gap: 2px;\n padding: 0 48px;\n max-width: 1280px; margin: 0 auto;\n }\n\n .ds-token-card {\n flex: 0 0 280px;\n padding: 32px 28px;\n border: 1px solid rgba(245,242,235,0.08);\n }\n\n .ds-token-card .token-label {\n font-family: var(--ff-mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: rgba(245,242,235,0.4);\n margin-bottom: 20px;\n }\n\n .ds-color-swatch {\n height: 60px;\n margin-bottom: 12px;\n border-radius: 2px;\n }\n\n .ds-type-sample {\n color: var(--bone);\n margin-bottom: 8px;\n }\n\n .ds-type-sample.display { font-family: var(--ff-display); font-size: 36px; }\n .ds-type-sample.serif { font-family: var(--ff-serif); font-style: italic; font-size: 22px; }\n .ds-type-sample.mono { font-family: var(--ff-mono); font-size: 13px; }\n\n .ds-spacing-demo {\n display: flex; align-items: flex-end; gap: 8px;\n }\n\n .sp-box {\n background: var(--rust);\n opacity: 0.7;\n width: 8px;\n }\n\n .ds-component-demo {\n margin-top: 16px;\n }\n\n .demo-btn {\n display: inline-block;\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n border: 1px solid rgba(245,242,235,0.3);\n padding: 10px 20px;\n color: var(--bone);\n margin-bottom: 8px;\n margin-right: 8px;\n cursor: default;\n }\n\n .demo-btn.filled {\n background: var(--rust);\n border-color: var(--rust);\n }\n\n .demo-input {\n width: 100%;\n background: transparent;\n border: 1px solid rgba(245,242,235,0.2);\n color: var(--bone);\n padding: 10px 14px;\n font-family: var(--ff-mono);\n font-size: 12px;\n outline: none;\n }\n\n .demo-input::placeholder { color: rgba(245,242,235,0.3); }\n\n \/* \u2500\u2500\u2500 BLOG \u2500\u2500\u2500 *\/\n #blog { padding: 120px 0; border-top: 1px solid var(--line); }\n\n .blog-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n gap: 2px;\n }\n\n .blog-card {\n padding: 36px 32px;\n border: 1px solid var(--line);\n display: flex; flex-direction: column;\n transition: border-color 0.2s, background 0.2s;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n }\n\n .blog-card:hover {\n border-color: var(--rust);\n background: rgba(200,75,42,0.03);\n }\n\n .blog-card.featured {\n background: var(--charcoal);\n border-color: transparent;\n color: var(--bone);\n }\n\n .blog-card.featured:hover { background: var(--ink); }\n\n .blog-num {\n font-family: var(--ff-display);\n font-size: 64px;\n color: var(--line);\n line-height: 1;\n margin-bottom: 32px;\n transition: color 0.3s;\n }\n\n .blog-card:hover .blog-num,\n .blog-card.featured .blog-num { color: var(--rust); }\n\n .blog-tag {\n font-family: var(--ff-mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--rust);\n margin-bottom: 12px;\n }\n\n .blog-title {\n font-family: var(--ff-serif);\n font-size: clamp(20px, 2.5vw, 32px);\n line-height: 1.2;\n flex: 1;\n margin-bottom: 24px;\n }\n\n .blog-card.featured .blog-title { color: var(--bone); }\n\n .blog-meta {\n display: flex; align-items: center; justify-content: space-between;\n padding-top: 20px;\n border-top: 1px solid var(--line);\n }\n\n .blog-card.featured .blog-meta { border-color: rgba(245,242,235,0.1); }\n\n .blog-date { font-size: 12px; color: var(--slate); font-family: var(--ff-mono); }\n .blog-card.featured .blog-date { color: rgba(245,242,235,0.4); }\n\n .blog-arrow {\n font-size: 18px;\n color: var(--slate);\n transition: color 0.2s, transform 0.2s;\n }\n\n .blog-card:hover .blog-arrow { color: var(--rust); transform: translateX(4px); }\n\n @media (max-width: 900px) {\n .blog-grid { grid-template-columns: 1fr; }\n }\n\n \/* \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 *\/\n #contact {\n padding: 120px 0;\n background: var(--ink);\n position: relative;\n overflow: hidden;\n }\n\n .contact-bg-text {\n position: absolute;\n bottom: -40px; left: -20px;\n font-family: var(--ff-display);\n font-size: clamp(140px, 20vw, 280px);\n color: rgba(245,242,235,0.03);\n letter-spacing: 0.02em;\n user-select: none;\n white-space: nowrap;\n pointer-events: none;\n }\n\n .contact-inner {\n max-width: 1280px; margin: 0 auto; padding: 0 48px;\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 80px; align-items: center;\n position: relative;\n }\n\n .contact-label { color: rgba(245,242,235,0.4); margin-bottom: 24px; }\n\n .contact-title {\n font-family: var(--ff-display);\n font-size: clamp(64px, 9vw, 120px);\n line-height: 0.9;\n letter-spacing: 0.02em;\n color: var(--bone);\n margin-bottom: 32px;\n }\n\n .contact-title span { color: var(--rust); }\n\n .contact-body {\n font-size: 15px;\n line-height: 1.75;\n color: rgba(245,242,235,0.6);\n margin-bottom: 40px;\n }\n\n .contact-links {\n display: flex; flex-direction: column; gap: 2px;\n }\n\n .contact-link-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 18px 20px;\n border: 1px solid rgba(245,242,235,0.08);\n text-decoration: none;\n transition: border-color 0.2s, background 0.2s;\n group: true;\n }\n\n .contact-link-row:hover {\n border-color: var(--rust);\n background: rgba(200,75,42,0.08);\n }\n\n .contact-link-name {\n font-family: var(--ff-mono);\n font-size: 12px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(245,242,235,0.5);\n transition: color 0.2s;\n }\n\n .contact-link-row:hover .contact-link-name { color: var(--bone); }\n\n .contact-link-val {\n font-size: 14px;\n color: var(--bone);\n }\n\n .contact-link-arrow {\n color: rgba(245,242,235,0.3);\n font-size: 14px;\n transition: color 0.2s, transform 0.2s;\n }\n\n .contact-link-row:hover .contact-link-arrow {\n color: var(--rust);\n transform: translateX(4px);\n }\n\n .contact-form-side { display: flex; flex-direction: column; gap: 2px; }\n\n .form-field {\n position: relative;\n }\n\n .form-input,\n .form-textarea {\n width: 100%;\n background: rgba(245,242,235,0.04);\n border: 1px solid rgba(245,242,235,0.1);\n color: var(--bone);\n padding: 18px 20px;\n font-family: var(--ff-sans);\n font-size: 15px;\n outline: none;\n transition: border-color 0.2s;\n resize: none;\n }\n\n .form-textarea { min-height: 140px; }\n\n .form-input:focus, .form-textarea:focus {\n border-color: var(--rust);\n }\n\n .form-input::placeholder, .form-textarea::placeholder {\n color: rgba(245,242,235,0.3);\n }\n\n .form-submit {\n font-family: var(--ff-mono);\n font-size: 12px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--bone);\n background: var(--rust);\n border: none;\n padding: 18px 32px;\n cursor: pointer;\n align-self: flex-start;\n transition: background 0.2s;\n margin-top: 8px;\n }\n\n .form-submit:hover { background: #e05530; }\n\n @media (max-width: 900px) {\n .contact-inner { grid-template-columns: 1fr; gap: 60px; }\n .contact-inner { padding: 0 24px; }\n }\n\n \/* \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 *\/\n footer {\n background: var(--ink);\n border-top: 1px solid rgba(245,242,235,0.06);\n padding: 40px 48px;\n }\n\n .footer-inner {\n max-width: 1280px; margin: 0 auto;\n display: flex; align-items: center; justify-content: space-between;\n }\n\n .footer-logo {\n font-family: var(--ff-display);\n font-size: 20px;\n letter-spacing: 0.08em;\n color: rgba(245,242,235,0.4);\n text-decoration: none;\n }\n\n .footer-logo span { color: var(--rust); }\n\n .footer-copy {\n font-family: var(--ff-mono);\n font-size: 11px;\n color: rgba(245,242,235,0.25);\n letter-spacing: 0.06em;\n }\n\n .footer-nav {\n display: flex; gap: 24px; list-style: none;\n }\n\n .footer-nav a {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(245,242,235,0.3);\n text-decoration: none;\n transition: color 0.2s;\n }\n\n .footer-nav a:hover { color: var(--rust); }\n\n @media (max-width: 768px) {\n footer { padding: 40px 24px; }\n .footer-inner { flex-direction: column; gap: 20px; text-align: center; }\n .footer-nav { display: none; }\n }\n\n \/* \u2500\u2500\u2500 UTILITIES \u2500\u2500\u2500 *\/\n .mt-0 { margin-top: 0; }\n .rust { color: var(--rust); }\n\n \/* \u2500\u2500\u2500 ENTRANCE ANIMATIONS \u2500\u2500\u2500 *\/\n .fade-up {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.7s ease, transform 0.7s ease;\n }\n\n .fade-up.visible { opacity: 1; transform: translateY(0); }\n\n .fade-up-delay-1 { transition-delay: 0.1s; }\n .fade-up-delay-2 { transition-delay: 0.2s; }\n .fade-up-delay-3 { transition-delay: 0.3s; }\n\n \/* \u2500\u2500\u2500 CURSOR DOT \u2500\u2500\u2500 *\/\n .cursor-dot {\n position: fixed;\n width: 8px; height: 8px;\n background: var(--rust);\n border-radius: 50%;\n pointer-events: none;\n z-index: 9999;\n transform: translate(-50%, -50%);\n transition: transform 0.1s;\n }\n\n .cursor-ring {\n position: fixed;\n width: 32px; height: 32px;\n border: 1px solid var(--rust);\n border-radius: 50%;\n pointer-events: none;\n z-index: 9998;\n transform: translate(-50%, -50%);\n transition: left 0.12s ease, top 0.12s ease, width 0.2s, height 0.2s, opacity 0.2s;\n opacity: 0.5;\n }\n\n @media (hover: none) {\n .cursor-dot, .cursor-ring { display: none; }\n }\n<\/style>\n<\/head>\n<body>\n\n<!-- Custom cursor -->\n<div class=\"cursor-dot\" id=\"cursorDot\"><\/div>\n<div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\n\n<!-- \u2500\u2500\u2500 NAV \u2500\u2500\u2500 -->\n<nav>\n <div class=\"nav-inner\">\n <a href=\"#\" class=\"nav-logo\">FORGE<span>.<\/span><\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#projects\">Work<\/a><\/li>\n <li><a href=\"#design-system\">System<\/a><\/li>\n <li><a href=\"#blog\">Writing<\/a><\/li>\n <li><a href=\"#about\">About<\/a><\/li>\n <\/ul>\n <a href=\"#contact\" class=\"nav-cta\">Let's Talk<\/a>\n <\/div>\n<\/nav>\n\n<!-- \u2500\u2500\u2500 HERO \u2500\u2500\u2500 -->\n<section class=\"hero\">\n <div class=\"container\">\n <div class=\"hero-eyebrow fade-up\">\n <div class=\"hero-badge\">\n <span class=\"hero-badge-dot\"><\/span>\n <span class=\"ds-label\">Available for projects<\/span>\n <\/div>\n <span class=\"ds-label\">Est. 2019 \u2014 Kochi, India<\/span>\n <\/div>\n\n <div class=\"hero-title-wrap\">\n <span class=\"hero-title fade-up fade-up-delay-1\">CRAFT<\/span>\n <span class=\"hero-title fade-up fade-up-delay-2\">MEETS<\/span>\n <span class=\"hero-title-italic fade-up fade-up-delay-3\">intention.<\/span>\n <\/div>\n\n <div class=\"hero-subgrid fade-up\" style=\"transition-delay: 0.4s;\">\n <div class=\"hero-desc\">\n <p>Independent studio building digital products, design systems, and experiences that endure. I work at the intersection of visual design and engineering.<\/p>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-num\">42<sup>+<\/sup><\/div>\n <div class=\"ds-label\">Projects shipped<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-num\">6<\/div>\n <div class=\"ds-label\">Years in practice<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-scroll\">\n <span class=\"ds-caption\" style=\"writing-mode: vertical-rl; letter-spacing: 0.1em; color: var(--slate);\">Scroll<\/span>\n <div class=\"scroll-line\"><\/div>\n <\/div>\n<\/section>\n\n<hr class=\"rule\">\n\n<!-- \u2500\u2500\u2500 PROJECTS \u2500\u2500\u2500 -->\n<section id=\"projects\">\n <div class=\"container\">\n <div class=\"section-header\">\n <div>\n <div class=\"ds-label\" style=\"margin-bottom: 12px;\">Selected Work \u2014 2022\u20132024<\/div>\n <h2 class=\"ds-h3\">PROJECTS<\/h2>\n <\/div>\n <a href=\"#\" class=\"section-link\">View all work \u2192<\/a>\n <\/div>\n <\/div>\n\n <div class=\"container\" style=\"padding: 0 48px;\">\n <div class=\"projects-grid\">\n\n <!-- Featured -->\n <div class=\"project-card fade-up\">\n <div class=\"project-thumb\" style=\"background: #1a1614; aspect-ratio: 21\/9; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;\">\n <!-- SVG Illustration Placeholder -->\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1200 514\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveAspectRatio=\"xMidYMid slice\">\n <rect width=\"1200\" height=\"514\" fill=\"#1a1614\"\/>\n <circle cx=\"200\" cy=\"257\" r=\"280\" fill=\"none\" stroke=\"#c84b2a\" stroke-width=\"0.5\" opacity=\"0.3\"\/>\n <circle cx=\"200\" cy=\"257\" r=\"180\" fill=\"none\" stroke=\"#c84b2a\" stroke-width=\"0.5\" opacity=\"0.2\"\/>\n <circle cx=\"200\" cy=\"257\" r=\"80\" fill=\"#c84b2a\" opacity=\"0.15\"\/>\n <line x1=\"0\" y1=\"257\" x2=\"1200\" y2=\"257\" stroke=\"#c84b2a\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <line x1=\"200\" y1=\"0\" x2=\"200\" y2=\"514\" stroke=\"#c84b2a\" stroke-width=\"0.5\" opacity=\"0.15\"\/>\n <text x=\"600\" y=\"290\" text-anchor=\"middle\" font-family=\"Bebas Neue, sans-serif\" font-size=\"120\" fill=\"rgba(245,242,235,0.04)\" letter-spacing=\"8\">APEX BRAND<\/text>\n <rect x=\"460\" y=\"160\" width=\"280\" height=\"3\" fill=\"#c84b2a\" opacity=\"0.6\"\/>\n <rect x=\"460\" y=\"351\" width=\"280\" height=\"1\" fill=\"rgba(245,242,235,0.15)\"\/>\n <\/svg>\n <\/div>\n <div class=\"project-overlay\">\n <div class=\"project-tags\">\n <span class=\"project-tag\">Brand Identity<\/span>\n <span class=\"project-tag\">Design System<\/span>\n <span class=\"project-tag\">Web<\/span>\n <\/div>\n <div class=\"project-name\">APEX BRAND IDENTITY<\/div>\n <div class=\"project-sub\">Full rebrand + digital design system \u00b7 2024<\/div>\n <\/div>\n <div class=\"project-arrow\">\u2197<\/div>\n <\/div>\n\n <!-- Card 2 -->\n <div class=\"project-card fade-up fade-up-delay-1\">\n <div class=\"project-thumb\" style=\"background: #0f1a22; aspect-ratio: 16\/9; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;\">\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 600 338\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveAspectRatio=\"xMidYMid slice\">\n <rect width=\"600\" height=\"338\" fill=\"#0f1a22\"\/>\n <rect x=\"40\" y=\"60\" width=\"240\" height=\"14\" rx=\"2\" fill=\"rgba(200,75,42,0.5)\"\/>\n <rect x=\"40\" y=\"86\" width=\"160\" height=\"8\" rx=\"2\" fill=\"rgba(245,242,235,0.1)\"\/>\n <rect x=\"40\" y=\"120\" width=\"520\" height=\"1\" fill=\"rgba(245,242,235,0.08)\"\/>\n <rect x=\"40\" y=\"138\" width=\"100\" height=\"50\" rx=\"2\" fill=\"rgba(200,75,42,0.15)\" stroke=\"rgba(200,75,42,0.3)\" stroke-width=\"1\"\/>\n <rect x=\"152\" y=\"138\" width=\"100\" height=\"50\" rx=\"2\" fill=\"rgba(245,242,235,0.04)\" stroke=\"rgba(245,242,235,0.1)\" stroke-width=\"1\"\/>\n <rect x=\"264\" y=\"138\" width=\"100\" height=\"50\" rx=\"2\" fill=\"rgba(245,242,235,0.04)\" stroke=\"rgba(245,242,235,0.1)\" stroke-width=\"1\"\/>\n <rect x=\"40\" y=\"210\" width=\"520\" height=\"80\" rx=\"2\" fill=\"rgba(245,242,235,0.03)\" stroke=\"rgba(245,242,235,0.06)\" stroke-width=\"1\"\/>\n <rect x=\"60\" y=\"228\" width=\"80\" height=\"6\" rx=\"1\" fill=\"rgba(245,242,235,0.15)\"\/>\n <rect x=\"60\" y=\"244\" width=\"120\" height=\"4\" rx=\"1\" fill=\"rgba(245,242,235,0.07)\"\/>\n <rect x=\"60\" y=\"258\" width=\"100\" height=\"4\" rx=\"1\" fill=\"rgba(245,242,235,0.07)\"\/>\n <\/svg>\n <\/div>\n <div class=\"project-overlay\">\n <div class=\"project-tags\"><span class=\"project-tag\">SaaS Dashboard<\/span><span class=\"project-tag\">UX<\/span><\/div>\n <div class=\"project-name\">NOVA ANALYTICS<\/div>\n <div class=\"project-sub\">B2B product design \u00b7 2023<\/div>\n <\/div>\n <div class=\"project-arrow\">\u2197<\/div>\n <\/div>\n\n <!-- Card 3 -->\n <div class=\"project-card fade-up fade-up-delay-2\">\n <div class=\"project-thumb\" style=\"background: #12100e; aspect-ratio: 16\/9; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;\">\n <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 600 338\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveAspectRatio=\"xMidYMid slice\">\n <rect width=\"600\" height=\"338\" fill=\"#12100e\"\/>\n <rect x=\"0\" y=\"0\" width=\"600\" height=\"338\" fill=\"url(#noise)\" opacity=\"0.02\"\/>\n <text x=\"300\" y=\"200\" text-anchor=\"middle\" font-family=\"Bebas Neue\" font-size=\"160\" fill=\"rgba(200,75,42,0.07)\" letter-spacing=\"4\">ORO<\/text>\n <rect x=\"160\" y=\"100\" width=\"280\" height=\"1\" fill=\"rgba(200,75,42,0.4)\"\/>\n <rect x=\"160\" y=\"102\" width=\"280\" height=\"80\" fill=\"rgba(200,75,42,0.04)\"\/>\n <text x=\"300\" y=\"150\" text-anchor=\"middle\" font-family=\"Bebas Neue\" font-size=\"32\" fill=\"rgba(245,242,235,0.15)\" letter-spacing=\"12\">ORO COFFEE<\/text>\n <text x=\"300\" y=\"172\" text-anchor=\"middle\" font-family=\"DM Mono\" font-size=\"9\" fill=\"rgba(245,242,235,0.1)\" letter-spacing=\"4\">SINGLE ORIGIN<\/text>\n <rect x=\"160\" y=\"182\" width=\"280\" height=\"1\" fill=\"rgba(200,75,42,0.2)\"\/>\n <\/svg>\n <\/div>\n <div class=\"project-overlay\">\n <div class=\"project-tags\"><span class=\"project-tag\">Packaging<\/span><span class=\"project-tag\">E-commerce<\/span><\/div>\n <div class=\"project-name\">ORO COFFEE CO.<\/div>\n <div class=\"project-sub\">Brand + Shopify build \u00b7 2023<\/div>\n <\/div>\n <div class=\"project-arrow\">\u2197<\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 ABOUT \u2500\u2500\u2500 -->\n<section>\n <div class=\"container\">\n <div id=\"about\">\n <div class=\"about-visual fade-up\">\n <div class=\"about-portrait\">\n <div class=\"portrait-placeholder\">\n <span class=\"portrait-monogram\">FS<\/span>\n <\/div>\n <\/div>\n <div class=\"about-tag-float\">\n <div class=\"ds-label\">Currently working on<\/div>\n <div style=\"font-family: var(--ff-display); font-size: 20px; color: var(--bone); letter-spacing: 0.05em; margin-top: 4px;\">DESIGN SYSTEMS<\/div>\n <\/div>\n <\/div>\n\n <div class=\"about-content fade-up fade-up-delay-1\">\n <div class=\"ds-label\">About the Studio<\/div>\n <h2 class=\"about-title\">Design is how it <em>works<\/em>, not just how it looks.<\/h2>\n <p class=\"about-body\">I'm a product designer and front-end developer based in Kochi. Forge Studio is my independent practice \u2014 a place where I take on projects that demand both rigorous thinking and aesthetic care. From startups finding their visual voice to enterprises refining their product experience, I bring the same craft and intention to every engagement.<\/p>\n\n <div class=\"skills-grid\">\n <div class=\"skill-cell\">\n <div class=\"skill-name\">Visual Design<\/div>\n <div class=\"skill-bar-wrap\"><div class=\"skill-bar\" style=\"width:95%;\"><\/div><\/div>\n <\/div>\n <div class=\"skill-cell\">\n <div class=\"skill-name\">React \/ Next.js<\/div>\n <div class=\"skill-bar-wrap\"><div class=\"skill-bar\" style=\"width:88%;\"><\/div><\/div>\n <\/div>\n <div class=\"skill-cell\">\n <div class=\"skill-name\">Design Systems<\/div>\n <div class=\"skill-bar-wrap\"><div class=\"skill-bar\" style=\"width:92%;\"><\/div><\/div>\n <\/div>\n <div class=\"skill-cell\">\n <div class=\"skill-name\">Brand Identity<\/div>\n <div class=\"skill-bar-wrap\"><div class=\"skill-bar\" style=\"width:80%;\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <a href=\"#contact\" class=\"nav-cta\" style=\"display: inline-block; text-decoration: none;\">Start a project \u2192<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 DESIGN SYSTEM \u2500\u2500\u2500 -->\n<section id=\"design-system\">\n <div class=\"ds-header\">\n <div>\n <div class=\"ds-label\">Design Language<\/div>\n <div class=\"ds-title\">DESIGN<br>SYSTEM<\/div>\n <\/div>\n <p style=\"max-width: 280px; font-size: 14px; color: rgba(245,242,235,0.45); line-height: 1.7; font-family: var(--ff-mono); align-self: flex-end;\">Every project begins with a coherent system of tokens, components, and principles.<\/p>\n <\/div>\n\n <div class=\"ds-scroll-track\">\n\n <div class=\"ds-token-card\">\n <div class=\"token-label\">01 \u2014 Color Palette<\/div>\n <div class=\"ds-color-swatch\" style=\"background: #c84b2a;\"><\/div>\n <div class=\"ds-color-swatch\" style=\"background: #0d0d0b; height: 30px;\"><\/div>\n <div class=\"ds-color-swatch\" style=\"background: #f5f2eb; height: 30px;\"><\/div>\n <div class=\"ds-color-swatch\" style=\"background: #2a2a26; height: 24px;\"><\/div>\n <div class=\"ds-color-swatch\" style=\"background: #8a8a82; height: 24px;\"><\/div>\n <\/div>\n\n <div class=\"ds-token-card\">\n <div class=\"token-label\">02 \u2014 Typography<\/div>\n <div class=\"ds-type-sample display\" style=\"margin-bottom: 12px;\">Aa<\/div>\n <div class=\"ds-type-sample serif\">Aa<\/div>\n <div style=\"margin-top: 16px;\">\n <div class=\"ds-type-sample mono\" style=\"font-size: 11px; color: rgba(245,242,235,0.4);\">BEBAS NEUE \u2014 Display<\/div>\n <div class=\"ds-type-sample mono\" style=\"font-size: 11px; color: rgba(245,242,235,0.4); margin-top: 4px;\">DM SERIF DISPLAY \u2014 Serif<\/div>\n <div class=\"ds-type-sample mono\" style=\"font-size: 11px; color: rgba(245,242,235,0.4); margin-top: 4px;\">INSTRUMENT SANS \u2014 Body<\/div>\n <\/div>\n <\/div>\n\n <div class=\"ds-token-card\">\n <div class=\"token-label\">03 \u2014 Spacing Scale<\/div>\n <div class=\"ds-spacing-demo\" style=\"align-items: flex-end; gap: 4px; margin-top: 20px;\">\n <div class=\"sp-box\" style=\"height: 8px;\"><\/div>\n <div class=\"sp-box\" style=\"height: 16px;\"><\/div>\n <div class=\"sp-box\" style=\"height: 24px;\"><\/div>\n <div class=\"sp-box\" style=\"height: 32px;\"><\/div>\n <div class=\"sp-box\" style=\"height: 48px;\"><\/div>\n <div class=\"sp-box\" style=\"height: 64px;\"><\/div>\n <div class=\"sp-box\" style=\"height: 96px;\"><\/div>\n <\/div>\n <div style=\"display: flex; gap: 4px; margin-top: 8px;\">\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">4<\/span>\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">8<\/span>\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">12<\/span>\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">16<\/span>\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">24<\/span>\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">32<\/span>\n <span class=\"ds-type-sample mono\" style=\"font-size: 9px; color: rgba(245,242,235,0.3); flex: 1; text-align: center;\">48<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ds-token-card\">\n <div class=\"token-label\">04 \u2014 Components<\/div>\n <div class=\"ds-component-demo\">\n <span class=\"demo-btn\">Secondary<\/span>\n <span class=\"demo-btn filled\">Primary<\/span>\n <div style=\"margin-top: 12px;\">\n <input class=\"demo-input\" placeholder=\"Email address\" readonly>\n <\/div>\n <div style=\"margin-top: 8px; display: flex; gap: 8px;\">\n <span style=\"font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(200,75,42,0.2); color: #e8c4b8; padding: 4px 10px;\">Brand<\/span>\n <span style=\"font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(245,242,235,0.08); color: rgba(245,242,235,0.5); padding: 4px 10px;\">Web<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 BLOG \u2500\u2500\u2500 -->\n<section id=\"blog\">\n <div class=\"container\">\n <div class=\"section-header\">\n <div>\n <div class=\"ds-label\" style=\"margin-bottom: 12px;\">Thoughts & Writing<\/div>\n <h2 class=\"ds-h3\">THE JOURNAL<\/h2>\n <\/div>\n <a href=\"#\" class=\"section-link\">All posts \u2192<\/a>\n <\/div>\n\n <div class=\"blog-grid\">\n\n <!-- Featured post -->\n <a href=\"#\" class=\"blog-card featured fade-up\" style=\"text-decoration: none;\">\n <div class=\"blog-num\">01<\/div>\n <div class=\"blog-tag\">Design Systems<\/div>\n <div class=\"blog-title\">Why most design systems fail before they even launch<\/div>\n <div style=\"font-size: 14px; color: rgba(245,242,235,0.5); line-height: 1.7; margin-bottom: auto; flex: 1; padding-bottom: 24px;\">The gap between a Figma token library and a design system that actually scales is where most studios lose the plot.<\/div>\n <div class=\"blog-meta\">\n <span class=\"blog-date\">24 Apr 2024<\/span>\n <span class=\"blog-arrow\">\u2192<\/span>\n <\/div>\n <\/a>\n\n <!-- Post 2 -->\n <a href=\"#\" class=\"blog-card fade-up fade-up-delay-1\" style=\"text-decoration: none;\">\n <div class=\"blog-num\">02<\/div>\n <div class=\"blog-tag\">Typography<\/div>\n <div class=\"blog-title\">On choosing typefaces for product UI<\/div>\n <div class=\"blog-meta\">\n <span class=\"blog-date\">11 Mar 2024<\/span>\n <span class=\"blog-arrow\">\u2192<\/span>\n <\/div>\n <\/a>\n\n <!-- Post 3 -->\n <a href=\"#\" class=\"blog-card fade-up fade-up-delay-2\" style=\"text-decoration: none;\">\n <div class=\"blog-num\">03<\/div>\n <div class=\"blog-tag\">Process<\/div>\n <div class=\"blog-title\">The brief is the design \u2014 how I start every engagement<\/div>\n <div class=\"blog-meta\">\n <span class=\"blog-date\">28 Jan 2024<\/span>\n <span class=\"blog-arrow\">\u2192<\/span>\n <\/div>\n <\/a>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 CONTACT \u2500\u2500\u2500 -->\n<section id=\"contact\">\n <div class=\"contact-bg-text\">FORGE<\/div>\n <div class=\"contact-inner\">\n <div>\n <div class=\"ds-label contact-label\">Let's work together<\/div>\n <div class=\"contact-title\">GET IN<br><span>TOUCH<\/span><\/div>\n <p class=\"contact-body\">Have a project in mind? I'd love to hear about it. Whether you need a brand identity, a product design system, or a full-stack web build \u2014 let's talk.<\/p>\n\n <div class=\"contact-links\">\n <a href=\"mailto:hello@forgestudio.in\" class=\"contact-link-row\">\n <span class=\"contact-link-name\">Email<\/span>\n <span class=\"contact-link-val\">hello@forgestudio.in<\/span>\n <span class=\"contact-link-arrow\">\u2197<\/span>\n <\/a>\n <a href=\"#\" class=\"contact-link-row\">\n <span class=\"contact-link-name\">LinkedIn<\/span>\n <span class=\"contact-link-val\">linkedin.com\/in\/forgestudio<\/span>\n <span class=\"contact-link-arrow\">\u2197<\/span>\n <\/a>\n <a href=\"#\" class=\"contact-link-row\">\n <span class=\"contact-link-name\">Dribbble<\/span>\n <span class=\"contact-link-val\">dribbble.com\/forgestudio<\/span>\n <span class=\"contact-link-arrow\">\u2197<\/span>\n <\/a>\n <a href=\"#\" class=\"contact-link-row\">\n <span class=\"contact-link-name\">GitHub<\/span>\n <span class=\"contact-link-val\">github.com\/forgestudio<\/span>\n <span class=\"contact-link-arrow\">\u2197<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"contact-form-side fade-up\">\n <input class=\"form-input\" type=\"text\" placeholder=\"Your name\">\n <input class=\"form-input\" type=\"email\" placeholder=\"Email address\">\n <input class=\"form-input\" type=\"text\" placeholder=\"Project type (Brand \/ Web \/ System)\">\n <textarea class=\"form-textarea\" placeholder=\"Tell me about your project...\"><\/textarea>\n <button class=\"form-submit\">Send message \u2192<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2500\u2500\u2500 FOOTER \u2500\u2500\u2500 -->\n<footer>\n <div class=\"footer-inner\">\n <a href=\"#\" class=\"footer-logo\">FORGE<span>.<\/span><\/a>\n <ul class=\"footer-nav\">\n <li><a href=\"#projects\">Work<\/a><\/li>\n <li><a href=\"#blog\">Writing<\/a><\/li>\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <span class=\"footer-copy\">\u00a9 2024 Forge Studio. All rights reserved.<\/span>\n <\/div>\n<\/footer>\n\n<script>\n \/\/ Cursor\n const dot = document.getElementById('cursorDot');\n const ring = document.getElementById('cursorRing');\n let mx = 0, my = 0;\n\n document.addEventListener('mousemove', e => {\n mx = e.clientX; my = e.clientY;\n dot.style.left = mx + 'px';\n dot.style.top = my + 'px';\n ring.style.left = mx + 'px';\n ring.style.top = my + 'px';\n });\n\n document.querySelectorAll('a, button, .project-card').forEach(el => {\n el.addEventListener('mouseenter', () => {\n ring.style.width = '56px'; ring.style.height = '56px'; ring.style.opacity = '0.8';\n });\n el.addEventListener('mouseleave', () => {\n ring.style.width = '32px'; ring.style.height = '32px'; ring.style.opacity = '0.5';\n });\n });\n\n \/\/ Intersection observer for fade-up\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));\n\n \/\/ Trigger visible on load for above-fold\n setTimeout(() => {\n document.querySelectorAll('.fade-up').forEach(el => {\n const rect = el.getBoundingClientRect();\n if (rect.top < window.innerHeight) {\n el.classList.add('visible');\n }\n });\n }, 50);\n\n \/\/ Form submit\n document.querySelector('.form-submit').addEventListener('click', function() {\n this.textContent = 'Message sent \u2713';\n this.style.background = '#2a6642';\n this.style.cursor = 'default';\n setTimeout(() => {\n this.textContent = 'Send message \u2192';\n this.style.background = 'var(--rust)';\n this.style.cursor = 'pointer';\n }, 3000);\n });\n\n \/\/ Smooth active nav\n const sections = document.querySelectorAll('section[id], #about');\n const navLinks = document.querySelectorAll('.nav-links a');\n\n window.addEventListener('scroll', () => {\n let current = '';\n sections.forEach(s => {\n if (window.scrollY >= s.offsetTop - 80) current = s.id;\n });\n navLinks.forEach(a => {\n a.style.color = a.getAttribute('href') === '#' + current ? 'var(--ink)' : '';\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Forge Studio \u2014 Design & Development FORGE. Work System Writing About Let’s Talk Available for projects Est. 2019 \u2014 Kochi, India CRAFT MEETS intention. Independent studio building digital products, design systems, and experiences that endure. I work at the intersection of visual design and engineering. 42+ Projects shipped 6 Years in practice Scroll Selected Work […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":13,"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/pages\/10\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/jewelgeorgeanto.co.in\/forge\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}