:root { --primary: #B0703C; --primary-deep: #94572C; --ochre: #C3824C; --terracotta: #AA623C; --olive: #8A8E75; --success: #6E8B5A; --dark: #1D1E18; --deep: #2E2C25; --stone: #C6BFB1; --light: #FBF6EC; --white: #FDFAF4; --bg-canvas: #F2E7D3; --b-pivotcrux: #EC5E28; --b-curio: #0A1F35; --b-anything: #3A5545; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Outfit', sans-serif; --navbar-height: 65px; --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --card-radius: 40px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg-canvas); color: var(--dark); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 600; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font-body); } .accent-text { color: var(--primary); letter-spacing: 2px; font-size: 1rem; text-transform: uppercase; margin-bottom: 15px; display: block; font-weight: 700; } section { position: relative; overflow: hidden; margin: 40px 4%; padding: 130px 6%; border-radius: var(--card-radius); box-shadow: 0 10px 40px rgba(0,0,0,0.03); } @media (max-width: 768px) { section { margin: 15px 10px; border-radius: 25px; padding: 60px 5%; } } .card-cream { background-color: var(--light); } .card-white { background-color: var(--white); } .card-dark { background-color: var(--deep); color: var(--light); } .card-dark h2 { color: var(--white); } .card-primary { background-color: var(--light); color: var(--dark); text-align: center; border: 1px solid rgba(195,130,76,0.22); } .card-primary h2 { color: var(--dark); } .card-primary p { color: var(--dark); opacity: 0.7; } .card-primary .accent-text { color: var(--primary); } .center-text { text-align: center; } .img-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .hover-scale { overflow: hidden; border-radius: 12px; } .hover-scale:hover .img-cover { transform: scale(1.05); } /* === ANIMATIONS === */ .anim { opacity: 0; transition: all 1.2s var(--ease-out-expo); will-change: transform, opacity; } .fade-up { transform: translateY(60px); } .from-left { transform: translateX(-80px); } .from-right { transform: translateX(80px); } .zoom-in { transform: scale(0.9); } .anim.active { opacity: 1; transform: translate(0) scale(1); } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; } .delay-400 { transition-delay: 0.4s; } /* === SCROLL MOTION === */ .reveal-mask { display: block; overflow: hidden; } .reveal-mask > span { display: block; transform: translateY(105%); transition: transform 1.15s var(--ease-out-expo); } .reveal-mask.active > span { transform: translateY(0); } .reveal-mask:nth-of-type(2) > span { transition-delay: 0.1s; } .par { will-change: transform; } .sec-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); width: 0; margin: 0 auto; transition: width 1.6s var(--ease-out-expo); opacity: 0.5; } .sec-rule.active { width: 100%; } .count-up { font-variant-numeric: tabular-nums; } .sticky-head { position: sticky; top: 110px; align-self: start; } @media (max-width: 900px) { .sticky-head { position: static; } } .float-slow { animation: floatY 7s ease-in-out infinite; } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .reveal-mask > span { transform: none !important; } .par { transform: none !important; } .float-slow { animation: none; } } /* === METRIC BAR === */ .metric-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1000px; margin: 56px auto 0; padding: 34px 30px; border-radius: 26px; background: rgba(253,250,244,0.55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 34px rgba(0,0,0,0.05); } .metric { text-align: center; } .metric .m-n { font-family: var(--font-heading); font-size: 2.9rem; font-weight: 700; color: var(--primary); line-height: 1; } .metric .m-l { font-size: 0.76rem; line-height: 1.5; color: #4A463E; margin-top: 9px; letter-spacing: 0.3px; } @media (max-width: 760px) { .metric-bar { grid-template-columns: repeat(2, 1fr); padding: 26px 20px; gap: 22px; } .metric .m-n { font-size: 2.2rem; } } /* === STICKY SCROLLER === */ .stickywrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; max-width: 1100px; margin: 70px auto 0; align-items: start; } .sticky-left { position: sticky; top: 140px; } .sticky-index { font-family: var(--font-heading); font-size: 5.5rem; font-weight: 700; color: var(--primary); line-height: 1; } .sticky-eyebrow { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: #6B6459; margin-top: 6px; } .sticky-bar { width: 100%; max-width: 190px; height: 2px; background: rgba(0,0,0,0.1); margin-top: 22px; border-radius: 2px; overflow: hidden; } .sticky-bar i { display: block; height: 100%; width: 16%; background: var(--primary); border-radius: 2px; transition: width 0.5s var(--ease-out-expo); } .sticky-hint { font-size: 0.76rem; color: #6B6459; margin-top: 16px; max-width: 190px; line-height: 1.55; } .sticky-right { display: flex; flex-direction: column; gap: 20px; } .sr-item { background: var(--white); border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; padding: 34px 32px; opacity: 0.32; transform: translateY(16px) scale(0.985); transition: all 0.7s var(--ease-out-expo); } .sr-item.on { opacity: 1; transform: none; box-shadow: 0 14px 40px rgba(0,0,0,0.07); } .sr-item h3 { font-size: 1.35rem; margin-bottom: 10px; } .sr-item p { font-size: 0.92rem; line-height: 1.75; color: #4A463E; } @media (max-width: 900px) { .stickywrap { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; } .sticky-left { position: static; } .sticky-index, .sticky-hint, .sticky-bar { display: none; } .sr-item { opacity: 1; transform: none; padding: 26px 22px; } } /* === ANYTHING USE CASES === */ .anything-block { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 26px; max-width: 1150px; margin: 50px auto 0; align-items: start; } .anything-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .use { background: var(--bg-canvas); border: 1px solid rgba(0,0,0,0.05); border-radius: 20px; padding: 22px 20px; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease; } .use:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0,0,0,0.08); } .use .u-n { font-family: var(--font-heading); font-size: 0.92rem; color: var(--primary); font-weight: 700; letter-spacing: 1px; } .use h4 { font-size: 1rem; margin: 7px 0 7px; line-height: 1.3; } .use p { font-size: 0.82rem; line-height: 1.65; color: #4A463E; } @media (max-width: 900px) { .anything-block { grid-template-columns: 1fr; } } @media (max-width: 600px) { .anything-uses { grid-template-columns: 1fr; } } /* === HORIZONTAL BRAND TRACK === */ .htrack-wrap { position: relative; margin-top: 50px; } .htrack { display: flex; gap: 22px; will-change: transform; } .htrack .bcard { flex: 0 0 320px; } @media (max-width: 900px) { .htrack { flex-wrap: wrap; transform: none !important; justify-content: center; } .htrack .bcard { flex: 0 0 calc(50% - 11px); } } @media (max-width: 600px) { .htrack .bcard { flex: 0 0 100%; } } /* === STAGE PROGRESS LINE === */ .stage-line { position: relative; height: 2px; background: rgba(0,0,0,0.08); max-width: 1150px; margin: 0 auto 34px; border-radius: 2px; overflow: hidden; } .stage-line i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--ochre)); transition: width 0.25s linear; } /* === MAGNETIC BUTTONS === */ .mag { transition: transform 0.35s var(--ease-out-expo); } /* === CANVAS THEMING (scroll-linked) === */ body { transition: background-color 1.1s cubic-bezier(0.4,0,0.2,1); } body.canvas-ivory { background-color: #F9F8F6; } body.canvas-earth { background-color: #EFECE6; } body.canvas-char { background-color: #2A2826; } /* === HERO NAME ASSEMBLY === */ .assemble { display: inline-block; } .assemble .ch { display: inline-block; opacity: 0; will-change: transform, opacity, filter; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rz)) scale(0.82); filter: blur(7px); transition: opacity 1.5s cubic-bezier(0.16,1,0.3,1), transform 1.7s cubic-bezier(0.16,1,0.3,1), filter 1.4s ease; } .assemble.settled .ch { opacity: 1; transform: none; filter: none; } /* === ROOM REVEAL === */ .reveal-room { position: relative; } .reveal-room .rr-after { position: absolute; inset: 0; will-change: opacity, filter; } .reveal-room .rr-after img { width: 100%; height: 100%; object-fit: cover; } /* === ROI METRICS === */ .roi-metric { font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 6px; } .roi-metric-l { font-size: 0.74rem; letter-spacing: 1.4px; text-transform: uppercase; color: #6B6459; } @media (prefers-reduced-motion: reduce) { .assemble .ch { opacity: 1 !important; transform: none !important; filter: none !important; } body { transition: none; } } /* === IMAGE SLOTS (real image, graceful fallback) === */ .slot { position: relative; border-radius: 22px; overflow: hidden; margin: 0; min-height: 220px; background: rgba(169,162,146,0.07); display: block; } .slot img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; transition: transform 1.1s var(--ease-out-expo); } .slot:hover img { transform: scale(1.04); } .slot .ph { display: none; } .slot.missing img { display: none; } .slot.missing { border: 1.5px dashed var(--stone); } .slot.missing .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 30px; min-height: 220px; } .card-dark .slot.missing { border-color: rgba(251,246,236,0.28); background: rgba(251,246,236,0.05); } /* === PINNED BRAND SCROLLER === */ #brand, #curio { overflow: visible; } @media (max-width: 900px) { #brand, #curio { overflow: hidden; } } .brandpin { height: 420vh; position: relative; margin-top: 40px; } .brandpin-inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .brandpin .htrack-wrap { width: 100%; overflow: hidden; } .brandpin .htrack { align-items: center; padding: 0 40px; gap: 34px; transition: transform 0.75s var(--ease-out-expo); } .brandpin .htrack .bcard { flex: 0 0 400px; opacity: 0.3; transform: scale(0.86); transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo); } .brandpin .htrack .bcard.live { opacity: 1; transform: scale(1); } .brand-dots { display: flex; gap: 9px; margin-top: 34px; } .brand-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.28; transition: opacity 0.4s ease, width 0.4s ease; } .brand-dots i.on { opacity: 1; width: 26px; border-radius: 6px; } @media (max-width: 900px) { .brandpin { height: auto; } .brandpin-inner { position: static; height: auto; } .brandpin .htrack { padding: 0; flex-wrap: wrap; justify-content: center; transform: none !important; } .brandpin .htrack .bcard { flex: 0 0 calc(50% - 17px); opacity: 1; transform: none; } .brand-dots { display: none; } } @media (max-width: 600px) { .brandpin .htrack .bcard { flex: 0 0 100%; } } /* === CASE STUDY BLOCK === */ .casestudy { display: grid; gap: 2px; margin: 26px 0 34px; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,0.06); } .cs-row { background: var(--white); padding: 22px 24px; display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: start; } .cs-k { font-size: 0.68rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primary); font-weight: 700; padding-top: 3px; } .cs-row p { font-size: 0.9rem; line-height: 1.75; color: #4A463E; } @media (max-width: 700px) { .cs-row { grid-template-columns: 1fr; gap: 7px; padding: 18px 20px; } } /* === 3D BEFORE / AFTER === */ .ba3d { perspective: 1600px; perspective-origin: 50% 45%; } .ba3d .before-after-container { transform-style: preserve-3d; } .ba3d .ba-before, .ba3d .ba-after { backface-visibility: hidden; will-change: transform, opacity, filter; } .ba3d .ba-before { clip-path: none !important; transform-origin: 50% 50%; } .ba3d .ba-divider, .ba3d .ba-handle { display: none !important; } .ba-scrollhint { text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 16px; letter-spacing: 0.4px; } /* === CURIO FABRICATION ANIMATION === */ .fab-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1000px; margin: 60px auto 0; } .fab-card { background: var(--white); border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; padding: 30px 26px; text-align: center; } .fab-card svg { width: 100%; max-width: 240px; height: 230px; margin: 0 auto 14px; display: block; } .fab-card h4 { font-size: 1.08rem; margin-bottom: 6px; } .fab-card p { font-size: 0.84rem; line-height: 1.65; color: #4A463E; } .vase-layer { transform-origin: center bottom; } .laser-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; } @media (max-width: 700px) { .fab-viz { grid-template-columns: 1fr; } } /* === CAPABILITY ICONS (replace empty image slots) === */ .capicon { background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 22px; padding: 30px 24px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s ease; } .capicon:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,0.08); } .card-dark .capicon { background: rgba(251,246,236,0.06); border-color: rgba(251,246,236,0.14); } .capicon h4 { font-size: 1.06rem; margin: 16px 0 6px; } .capicon p { font-size: 0.82rem; line-height: 1.6; color: #4A463E; max-width: 240px; } .card-dark .capicon h4 { color: var(--light); } .card-dark .capicon p { color: #C6BFB1; } .ci-art { width: 78px; height: 66px; position: relative; } .ci-art::before, .ci-art::after { content: ''; position: absolute; } /* printer: a head that travels while layers stack */ [data-icon="printer"] .ci-art::before { left: 20px; right: 20px; bottom: 8px; height: 4px; background: var(--primary); border-radius: 2px; animation: ciRise 2.6s ease-in-out infinite; } [data-icon="printer"] .ci-art::after { left: 8px; right: 8px; top: 6px; height: 3px; background: var(--primary-deep); border-radius: 2px; animation: ciHead 2.6s ease-in-out infinite; } @keyframes ciRise { 0%,100% { height: 4px; opacity: 0.45; } 50% { height: 40px; opacity: 1; } } @keyframes ciHead { 0%,100% { transform: translateY(0); } 50% { transform: translateY(14px); } } /* laser: a beam sweeping a sheet */ [data-icon="laser"] .ci-art::before { inset: 10px 8px; border: 2px solid rgba(138,142,117,0.5); border-radius: 8px; } [data-icon="laser"] .ci-art::after { top: 10px; bottom: 10px; width: 2px; left: 12px; background: var(--primary-deep); box-shadow: 0 0 10px var(--primary); animation: ciSweep 2.4s ease-in-out infinite; } @keyframes ciSweep { 0%,100% { left: 12px; } 50% { left: 62px; } } /* cutter: a blade tracing a path */ [data-icon="cutter"] .ci-art::before { inset: 12px 10px; border: 2px dashed rgba(0,0,0,0.18); border-radius: 10px; } [data-icon="cutter"] .ci-art::after { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); offset-path: inset(12px 10px round 10px); animation: ciTrace 4.5s linear infinite; } @keyframes ciTrace { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* backdrop: a panel swapping on a fixed base */ [data-icon="backdrop"] .ci-art::before { left: 14px; right: 14px; top: 8px; height: 38px; background: var(--primary); border-radius: 6px; opacity: 0.85; animation: ciSwap 3s ease-in-out infinite; } [data-icon="backdrop"] .ci-art::after { left: 6px; right: 6px; bottom: 10px; height: 8px; background: var(--olive); border-radius: 3px; } @keyframes ciSwap { 0%,45% { transform: translateX(0); opacity: 0.9; } 55%,100% { transform: translateX(0) scale(1,0.94); opacity: 0.55; } } /* grid: a feed filling in */ [data-icon="grid"] .ci-art { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; width: 66px; height: 66px; } [data-icon="grid"] .ci-art::before, [data-icon="grid"] .ci-art::after { display: none; } [data-icon="grid"] .ci-art i { background: var(--primary); border-radius: 4px; opacity: 0.2; animation: ciFill 3.6s ease-in-out infinite; } /* print: sheets feeding out */ [data-icon="print"] .ci-art::before { left: 16px; right: 16px; top: 10px; bottom: 22px; border: 2px solid var(--primary); border-radius: 5px; } [data-icon="print"] .ci-art::after { left: 22px; right: 22px; bottom: 8px; height: 16px; background: var(--primary-deep); border-radius: 3px; animation: ciFeed 2.8s ease-in-out infinite; } @keyframes ciFeed { 0%,100% { transform: translateY(6px); opacity: 0.35; } 50% { transform: translateY(0); opacity: 1; } } /* plan: a floor plan drawing itself */ [data-icon="plan"] .ci-art::before { inset: 8px 6px; border: 2px solid var(--primary); border-radius: 4px; } [data-icon="plan"] .ci-art::after { left: 6px; width: 2px; top: 8px; bottom: 8px; background: var(--primary-deep); animation: ciPlan 3.2s ease-in-out infinite; } @keyframes ciPlan { 0%,100% { left: 20px; opacity: 0.4; } 50% { left: 52px; opacity: 1; } } @keyframes ciFill { 0%,100% { opacity: 0.18; } 50% { opacity: 0.95; } } @media (prefers-reduced-motion: reduce) { .ci-art *, .ci-art::before, .ci-art::after { animation: none !important; } } /* === SEVEN STAGES: 4 + 3, no orphan === */ .study-flow.seven { grid-template-columns: repeat(4, 1fr); } .study-flow.seven .study-step:nth-child(5) { grid-column: 1 / span 1; } @media (max-width: 1100px) { .study-flow.seven { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 700px) { .study-flow.seven { grid-template-columns: 1fr !important; } } /* === ANYTHING: description column stretches with the use cases === */ .anything-block { align-items: stretch !important; } .anything-block > .cap-box { display: flex; flex-direction: column; justify-content: center; } .study-flow.seven { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .study-flow.seven .study-step { flex: 0 0 calc(25% - 15px); } @media (max-width: 1100px) { .study-flow.seven .study-step { flex: 0 0 calc(50% - 10px); } } @media (max-width: 700px) { .study-flow.seven .study-step { flex: 0 0 100%; } } /* === BRAND TONE SHIFT === */ #brand { transition: background-color 0.55s var(--ease-out-expo); } #brand .bcard { transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s var(--ease-out-expo), opacity 0.5s ease; } #brand .bcard.dim { opacity: 0.5; } .lz-sheet { fill: rgba(138,142,117,0.16); stroke: rgba(0,0,0,0.14); stroke-width: 1.4; } .lz-cut { stroke: var(--primary-deep); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; } .capicon.active .lz-cut { animation: lzCut 2.8s var(--ease-out-expo) forwards; } @keyframes lzCut { to { stroke-dashoffset: 0; } } .lz-head rect { fill: var(--dark); } .lz-head path { fill: var(--primary); opacity: 0.85; } .capicon.active .lz-head { animation: lzMove 2.8s ease-in-out forwards; } @keyframes lzMove { 0% { transform: translate(38px,40px); } 30% { transform: translate(82px,40px); } 55% { transform: translate(82px,74px); } 80% { transform: translate(38px,74px); } 100% { transform: translate(38px,40px); } } .lz-spark { fill: var(--ochre); opacity: 0; } .capicon.active .lz-spark { animation: lzMove 2.8s ease-in-out forwards, lzGlow 0.4s linear infinite; } @keyframes lzGlow { 0%,100% { opacity: 0.9; } 50% { opacity: 0.35; } } /* === DRAWN CAPABILITY ICONS === */ .ci-svg { width: 100%; max-width: 132px; height: 118px; display: block; margin: 0 auto; overflow: visible; } .ci-svg * { vector-effect: non-scaling-stroke; } .pr-gantry, .pr-bed { fill: var(--stone); } .pr-head rect { fill: var(--primary-deep); } .pr-head path { fill: var(--primary); } .pr-layers rect { fill: var(--primary); opacity: 0; } .capicon.active .pr-layers rect { animation: prLayer 2.6s var(--ease-out-expo) forwards; } @keyframes prLayer { to { opacity: 0.9; } } .capicon.active .pr-head { animation: prMove 2.6s ease-in-out infinite alternate; } @keyframes prMove { from { transform: translate(38px, 16px); } to { transform: translate(78px, 16px); } } .bd-arch { fill: none; stroke: var(--primary-deep); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 210; stroke-dashoffset: 210; } .capicon.active .bd-arch { animation: bdDraw 1.5s var(--ease-out-expo) forwards; } @keyframes bdDraw { to { stroke-dashoffset: 0; } } .bd-base { fill: var(--stone); } .bd-flowers circle { fill: var(--olive); opacity: 0; transform-origin: center; } .capicon.active .bd-flowers circle { animation: bdPop 0.6s var(--ease-out-expo) forwards; } .capicon.active .bd-flowers circle:nth-child(1) { animation-delay: 0.6s } .capicon.active .bd-flowers circle:nth-child(2) { animation-delay: 0.75s } .capicon.active .bd-flowers circle:nth-child(3) { animation-delay: 0.9s } .capicon.active .bd-flowers circle:nth-child(4) { animation-delay: 1.05s } .capicon.active .bd-flowers circle:nth-child(5) { animation-delay: 1.2s } .capicon.active .bd-flowers circle:nth-child(6) { animation-delay: 1.35s } .capicon.active .bd-flowers circle:nth-child(7) { animation-delay: 1.5s } @keyframes bdPop { from { opacity: 0; transform: scale(0.2); } to { opacity: 0.95; transform: scale(1); } } .bd-panel rect { fill: var(--primary); opacity: 0; } .capicon.active .bd-panel rect { animation: bdPanel 0.8s 1.6s var(--ease-out-expo) forwards; } @keyframes bdPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 0.28; transform: none; } } /* === SCROLL-BUILT ROOM === */ .buildwrap { max-width: 1060px; margin: 56px auto 0; } .buildstage { position: relative; aspect-ratio: 4/3; border-radius: 26px; overflow: hidden; background: #16150F; box-shadow: 0 30px 70px rgba(0,0,0,0.42); perspective: 1400px; } .bstage { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity, filter; transition: opacity 0.45s linear; } .bstage img { width: 100%; height: 100%; object-fit: cover; } .bglow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,0.45) 100%); } .bcaption { position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 4; background: rgba(22,21,15,0.42); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); border-radius: 18px; padding: 18px 22px; color: #F6F1E6; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; } .bc-k { font-family: var(--font-heading); font-size: 1.5rem; color: var(--ochre); grid-row: span 2; } .bc-t { font-family: var(--font-heading); font-size: 1.2rem; } .bc-d { font-size: 0.84rem; opacity: 0.78; line-height: 1.55; } .bsteps { display: flex; gap: 8px; justify-content: center; margin-top: 20px; } .bsteps i { width: 30px; height: 3px; border-radius: 2px; background: rgba(246,241,230,0.22); transition: all 0.4s ease; } .bsteps i.on { background: var(--ochre); width: 46px; } @media (max-width: 700px) { .buildstage { aspect-ratio: 3/4; } .bcaption { left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; grid-template-columns: 1fr; } .bc-k { grid-row: auto; font-size: 1.1rem; } .bc-t { font-size: 1rem; } .bc-d { font-size: 0.78rem; } } #brand { color: #F3EDE2; transition: background-color 0.75s var(--ease-out-expo); } #brand h2, #brand .bcard h4 { color: #F6F1E6; } #brand .center-text p { color: rgba(243,237,226,0.72); } #brand .bcard { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } #brand .bcard .bsector { color: rgba(243,237,226,0.75); } #brand .bcard .bwork { color: rgba(243,237,226,0.5); } #brand .cap-box { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } #brand .cap-box h3 { color: #F6F1E6; } #brand .cap-box p { color: rgba(243,237,226,0.78); } #brand .capicon h4 { color: #F6F1E6; } #brand .capicon p { color: rgba(243,237,226,0.7); } #brand .brand-dots { display: none !important; } /* === BRAND COVERFLOW === */ #brand .htrack-wrap { position: relative; margin-top: 56px; height: 470px; } #brand .htrack { position: absolute; inset: 0; display: block; transform: none !important; } #brand .bcard { position: absolute; top: 0; left: 50%; width: 300px; margin-left: -150px; transition: transform 0.85s var(--ease-out-expo), opacity 0.85s var(--ease-out-expo), filter 0.85s var(--ease-out-expo); will-change: transform, opacity; opacity: 1; } #brand .bcard.dim { opacity: 1; } #brand .bcard .blogo { border-radius: 22px 22px 0 0; } #brand .bcard .bmeta { opacity: 0; transition: opacity 0.5s ease 0.2s; } #brand .bcard.focus .bmeta { opacity: 1; } #brand .bsteps2 { display: flex; gap: 8px; justify-content: center; margin-top: 26px; position: relative; z-index: 5; } #brand .bsteps2 i { width: 26px; height: 3px; border-radius: 2px; background: rgba(0,0,0,0.14); transition: all 0.4s ease; } #brand .bsteps2 i.on { width: 42px; background: var(--primary-deep); } @media (max-width: 760px) { #brand .htrack-wrap { height: 400px; } #brand .bcard { width: 230px; margin-left: -115px; } } /* any icon that now draws its own SVG must drop the old CSS art */ .ci-art:has(> .ci-svg)::before, .ci-art:has(> .ci-svg)::after { display: none !important; content: none !important; } [data-icon="printer"] .ci-art::before, [data-icon="printer"] .ci-art::after, [data-icon="backdrop"] .ci-art::before, [data-icon="backdrop"] .ci-art::after, [data-icon="laser"] .ci-art::before, [data-icon="laser"] .ci-art::after, [data-icon="print"] .ci-art::before, [data-icon="print"] .ci-art::after { display: none !important; } /* dark-section capability cards keep readable text */ #brand .capicon { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; } #brand .capicon h4 { color: #F6F1E6 !important; } #brand .capicon p { color: rgba(243,237,226,0.72) !important; } #brand .capicon .ci-art i, #brand .capicon .ci-art span { background: rgba(243,237,226,0.55) !important; } /* coverflow: larger cards */ #brand .htrack-wrap { height: 560px; } #brand .bcard { width: 380px; margin-left: -190px; } @media (max-width: 760px) { #brand .htrack-wrap { height: 430px; } #brand .bcard { width: 260px; margin-left: -130px; } } /* === ISOMETRIC ROOM === */ .isowrap { max-width: 1000px; margin: 54px auto 0; } .isostage { position: relative; aspect-ratio: 5/4; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 100% at 50% 30%, #4A4136 0%, #2A2620 70%); box-shadow: 0 30px 70px rgba(0,0,0,0.45); } #isoSvg { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; } #isoReal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity, transform; } .iso-piece { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.5s ease, transform 0.7s var(--ease-out-expo); } .iso-piece.on { opacity: 1; } .iso-lbl { opacity: 0; transition: opacity 0.45s ease; } .iso-lbl.on { opacity: 1; } .iso-lbl line { stroke: rgba(246,241,230,0.6); stroke-width: 1.4; } .iso-lbl text { fill: #F6F1E6; font-family: var(--font-body); font-size: 15px; letter-spacing: 1.2px; } .isocap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 6; background: rgba(22,21,15,0.44); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); border-radius: 18px; padding: 17px 22px; color: #F6F1E6; display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; align-items: baseline; } .ic-k { font-family: var(--font-heading); font-size: 1.45rem; color: var(--ochre); grid-row: span 2; } .ic-t { font-family: var(--font-heading); font-size: 1.18rem; } .ic-d { font-size: 0.83rem; opacity: 0.78; line-height: 1.55; } .isosteps { display: flex; gap: 7px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .isosteps i { width: 22px; height: 3px; border-radius: 2px; background: rgba(246,241,230,0.2); transition: all 0.4s ease; } .isosteps i.on { background: var(--ochre); width: 34px; } @media (max-width: 700px) { .isostage { aspect-ratio: 1/1; } .isocap { left: 13px; right: 13px; bottom: 13px; padding: 13px 15px; grid-template-columns: 1fr; } .ic-k { grid-row: auto; font-size: 1rem; } .ic-t { font-size: 0.98rem; } .ic-d { font-size: 0.76rem; } .iso-lbl text { font-size: 20px; } } /* === RESPONSIVE REFINEMENT === */ @media (max-width: 1100px) and (min-width: 761px) { .study-flow, .cap-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 760px; } .bwall { grid-template-columns: repeat(2, 1fr); max-width: 720px; } .shots { grid-template-columns: repeat(2, 1fr); } .cap-2 { grid-template-columns: 1fr; max-width: 720px; } section h2 { font-size: 2.4rem !important; } .overview-text h2 { font-size: 2.8rem !important; } section { padding: 100px 6%; } } @media (max-width: 760px) { section { padding: 64px 6% !important; margin: 14px 12px !important; border-radius: 26px !important; } section h2 { font-size: 1.85rem !important; line-height: 1.2 !important; } .overview-text h2 { font-size: 2rem !important; } .center-text p, .sec-lede { font-size: 0.92rem !important; } .study-flow, .cap-grid, .cap-2, .bwall, .shots, .packages-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .study-step, .cap-box { padding: 26px 22px !important; } .study-num { font-size: 1.8rem !important; } .ph { min-height: 170px; padding: 24px; } .ph .ph-t { font-size: 1.05rem; } .prj-band-in h3 { font-size: 1.35rem !important; } .prj-band-tags span { font-size: 0.6rem; padding: 3px 9px; } .prj-band-meta { font-size: 0.62rem; } .accent-text { font-size: 0.78rem !important; letter-spacing: 1.5px; } .section-watermark { font-size: 2rem !important; } .nav-container { top: 12px; } .nav { padding: 0 22px; height: 52px; } .nav-logo-text { font-size: 0.95rem; } .sec-rule { max-width: 160px !important; } .skill-col { margin-bottom: 22px; } .chip { font-size: 0.74rem; padding: 6px 13px; } .shot img { aspect-ratio: 16/11; } .timeline .tl-item { padding: 14px 16px; } } @media (max-width: 480px) { section { padding: 54px 5% !important; } section h2 { font-size: 1.6rem !important; } .hero h1 { font-size: 1.9rem !important; } } /* === SOURCING STUDY === */ .study-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1000px; margin: 50px auto 0; } .study-step { background: var(--bg-canvas); border: 1px solid rgba(0,0,0,0.05); border-radius: 22px; padding: 34px 28px; } .study-num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 12px; } .study-step h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--dark); } .study-step p { font-size: 0.9rem; line-height: 1.7; color: #4A463E; } .study-compare { display: flex; align-items: stretch; justify-content: center; gap: 0; max-width: 880px; margin: 40px auto 0; flex-wrap: nowrap; } .sc-col { flex: 1; border-radius: 20px; padding: 28px 26px; } .sc-designer { background: var(--dark); color: #fff; } .sc-budget { background: linear-gradient(135deg, var(--primary-deep), #7C4623); color: #fff; } .sc-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; background: rgba(255,255,255,0.16); margin-bottom: 16px; } .sc-line { font-size: 0.9rem; line-height: 1.5; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.14); } .sc-line:last-child { border-bottom: none; } .sc-arrow { display: flex; align-items: center; padding: 0 18px; font-size: 1.6rem; color: var(--primary); font-weight: 700; } .study-note { text-align: center; max-width: 620px; margin: 30px auto 0; font-size: 1rem; font-weight: 600; color: var(--dark); line-height: 1.6; } .study-note span { display: block; margin-top: 8px; font-size: 0.78rem; font-weight: 400; opacity: 0.55; } @media (max-width: 820px) { .study-flow { grid-template-columns: 1fr; max-width: 440px; } .study-compare { flex-direction: column; gap: 14px; max-width: 440px; } .sc-arrow { transform: rotate(90deg); padding: 4px 0; justify-content: center; } } /* === SCROLL PROGRESS === */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--primary); z-index: 300; transition: width 0.08s linear; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .anim { transition-duration: 0.01ms !important; } .hero-bg { transform: none !important; } } /* === NAVBAR === */ .nav-container { position: fixed; top: 25px; left: 0; width: 100%; z-index: 100; display: flex; justify-content: center; pointer-events: none; transition: all 0.4s ease; } .nav { width: auto; min-width: 200px; height: var(--navbar-height); padding: 0 40px; display: flex; justify-content: center; align-items: center; gap: 15px; background: rgba(255,255,255,0); backdrop-filter: blur(0px); border: 1px solid rgba(255,255,255,0); border-radius: 50px; opacity: 0; transform: translateY(-30px); transition: all 0.6s var(--ease-out-expo); } .nav-container.scrolled .nav { background: rgba(255,255,255,0.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.06); opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-logo-img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); } .nav-logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; color: var(--dark); white-space: nowrap; } .nav-menu { display: flex; gap: 20px; margin-left: 8px; } .nav-menu a { font-size: 0.82rem; color: var(--dark); opacity: 0.88; position: relative; padding: 3px 0; transition: opacity 0.3s ease; white-space: nowrap; } .nav-menu a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--primary); transition: width 0.35s var(--ease-out-expo); } .nav-menu a:hover { opacity: 1; } .nav-menu a:hover::after { width: 100%; } @media (max-width: 900px) { .nav-menu { display: none; } } .hero-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .hero-tags span { font-size: 0.72rem; letter-spacing: 0.6px; color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); padding: 6px 14px; border-radius: 100px; } @media (max-width: 768px) { .hero-tags span { font-size: 0.62rem; padding: 5px 11px; } } /* === VENTURE TAGS === */ .vtag { display: inline-flex; align-items: center; font-size: 0.62rem; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; padding: 6px 14px; border-radius: 100px; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 14px rgba(0,0,0,0.12); } .vtag.pivotcrux { background: var(--b-pivotcrux); } .vtag.curio { background: var(--b-curio); } .vtag.anything { background: var(--b-anything); } .vtag.client { background: var(--olive); } /* === PROJECT BANDS (new presentation) === */ .prj-band { position: relative; border-radius: 26px; overflow: hidden; height: 200px; cursor: pointer; background: var(--deep); } .prj-band-bg { position: absolute; inset: 0; transition: transform 1.1s var(--ease-out-expo); } .prj-band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 1.1s var(--ease-out-expo); } .prj-band:hover .prj-band-bg { transform: scale(1.05); } .prj-band:hover .prj-band-bg img { opacity: 0.4; } .prj-band-in { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; color: var(--light); } .prj-band-in h3 { font-size: 2rem; color: #fff; line-height: 1.1; } .prj-band-meta { font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.78; margin-bottom: 6px; } .prj-band-tags { display: flex; gap: 7px; margin-top: 13px; flex-wrap: wrap; } .prj-band-tags span { font-size: 0.68rem; border: 1px solid rgba(255,255,255,0.28); padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,0.10); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } .prj-band-idx { font-family: var(--font-heading); font-size: 2.6rem; opacity: 0.38; } @media (max-width: 768px) { .prj-band { height: 180px; } .prj-band-in { padding: 0 26px; } .prj-band-in h3 { font-size: 1.5rem; } .prj-band-idx { display: none; } } /* === BRAND WALL === */ .bwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 50px auto 0; } .bcard { border-radius: 26px; overflow: hidden; background: var(--bg-canvas); border: 1px solid rgba(0,0,0,0.05); transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s var(--ease-out-expo); } .bcard:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(0,0,0,0.12); } .bcard .blogo { aspect-ratio: 1/1; overflow: hidden; } .bcard .blogo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out-expo); } .bcard:hover .blogo img { transform: scale(1.05); } .bcard .bmeta { padding: 22px 26px 26px; } .bcard h4 { font-size: 1.2rem; margin-bottom: 4px; } .bcard .bsector { font-size: 0.82rem; color: #4A463E; margin-bottom: 12px; } .bcard .bwork { font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: #7C7568; } @media (max-width: 900px) { .bwall { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bwall { grid-template-columns: 1fr; } } /* === APP SHOTS === */ .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; } .shot { border-radius: 20px; overflow: hidden; background: #fff; cursor: zoom-in; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } .shot:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,0.22); } .shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; } .shot .cap { padding: 12px 16px; font-size: 0.76rem; color: #423E37; } @media (max-width: 900px) { .shots { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .shots { grid-template-columns: 1fr; } } /* === IMAGE PLACEHOLDERS === */ .ph { border: 1.5px dashed var(--stone); border-radius: 22px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 30px; background: rgba(169,162,146,0.07); } .card-dark .ph { border-color: rgba(251,245,233,0.28); background: rgba(251,245,233,0.05); } .ph .ph-i { font-size: 1.5rem; opacity: 0.5; } .ph .ph-t { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--dark); } .card-dark .ph .ph-t { color: var(--light); } .ph .ph-s { font-size: 0.78rem; max-width: 290px; line-height: 1.55; color: #6B6459; } .card-dark .ph .ph-s { color: #C6BFB1; } .ph .ph-f { margin-top: 4px; font-size: 0.66rem; letter-spacing: 0.6px; color: var(--primary); font-family: monospace; border: 1px solid rgba(170,98,60,0.32); border-radius: 100px; padding: 3px 12px; } /* === GENERIC GRIDS === */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 50px auto 0; } .cap-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1100px; margin: 40px auto 0; align-items: stretch; } .cap-box { background: var(--bg-canvas); border: 1px solid rgba(0,0,0,0.05); border-radius: 22px; padding: 32px 28px; } .card-dark .cap-box { background: rgba(251,245,233,0.06); border-color: rgba(251,245,233,0.14); } .cap-box h3 { font-size: 1.28rem; margin-bottom: 10px; } .card-dark .cap-box h3 { color: var(--light); } .cap-box p, .cap-box li { font-size: 0.9rem; line-height: 1.75; color: #4A463E; } .card-dark .cap-box p, .card-dark .cap-box li { color: #DDD6C7; } .cap-box ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .cap-box li { padding-left: 18px; position: relative; } .cap-box li::before { content: '·'; position: absolute; left: 0; color: var(--primary); font-weight: 700; } @media (max-width: 900px) { .cap-grid, .cap-2 { grid-template-columns: 1fr; } } /* === CHIPS === */ .skill-col h4 { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); margin-bottom: 13px; font-weight: 700; } .skill-col { margin-bottom: 28px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { border: 1px solid rgba(0,0,0,0.16); border-radius: 100px; padding: 7px 16px; font-size: 0.8rem; color: #3E3A33; transition: all 0.3s ease; } .card-dark .chip { color: var(--light); } .chip:hover { border-color: var(--primary); opacity: 1; } .card-dark .chip { border-color: rgba(251,245,233,0.22); } /* === HERO === */ .hero { height: 95vh; padding: 0; margin-top: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 110%; object-fit: cover; object-position: center; z-index: 0; } .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(65,61,58,0.40) 0%, rgba(65,61,58,0.15) 42%, rgba(65,61,58,0.55) 100%); } .hero-content { text-align: center; color: white; position: relative; z-index: 2; background: rgba(0,0,0,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 50px 70px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.2); max-width: 750px; } .hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } .hero-btn { display: inline-block; padding: 14px 32px; border-radius: 50px; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.3px; transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, background 0.3s ease; } .hero-btn-primary { background: var(--primary-deep); color: #fff; box-shadow: 0 8px 24px rgba(148,87,44,0.4); } .hero-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(236,94,40,0.45); } .hero-btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.45); } .hero-btn-ghost:hover { background: rgba(255,255,255,0.22); transform: translateY(-3px); } .scroll-down { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.6); border-radius: 20px; display: flex; justify-content: center; padding-top: 8px; } .scroll-down span { width: 4px; height: 8px; background: rgba(255,255,255,0.9); border-radius: 4px; animation: scrolldot 1.6s var(--ease-out-expo) infinite; } @keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } } .hero h1 { font-size: 4.5rem; margin-bottom: 5px; color: #fff; text-shadow: 0 4px 15px rgba(0,0,0,0.3); } .hero p { font-size: 1.3rem; color: #f0f0f0; letter-spacing: 1px; } @media (max-width: 768px) { .hero h1 { font-size: 1.8rem !important; line-height: 1.25 !important; } .hero-content { padding: 30px 24px; border-radius: 28px; max-width: 90%; } .hero-content p { font-size: 0.8rem !important; line-height: 1.6 !important; } } /* === LOGO STRIP === */ .logo-strip { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 28px 0; flex-wrap: wrap; } .logo-strip img { height: 22px; width: auto; opacity: 0.25; filter: grayscale(1); transition: all 0.4s ease; } .logo-strip img:hover { opacity: 0.6; filter: none; } @media (max-width: 768px) { .logo-strip { gap: 20px; padding: 16px 20px !important; margin: 15px 5% !important; border-radius: 20px !important; } .logo-strip img { height: 16px; } } /* === OVERVIEW / CONCEPT === */ .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; } .overview-text h2 { font-size: 4.2rem; margin-bottom: 30px; line-height: 1.05; } .overview-text p { font-size: 1.3rem; line-height: 1.8; opacity: 0.9; color: #555; } .overview-img-height { height: 550px; border-radius: 12px; box-shadow: 20px 20px 60px rgba(0,0,0,0.05); } @media (max-width: 1024px) { .overview-grid { grid-template-columns: 1fr; gap: 40px; } .overview-text h2 { font-size: 3rem; } } /* === BEFORE & AFTER === */ .before-after-container { max-width: 1100px; margin: 0 auto; } .before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; } .ba-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.1); } .ba-card img { width: 100%; height: 400px; object-fit: cover; transition: transform 0.6s ease; } .ba-card:hover img { transform: scale(1.03); } .ba-label { position: absolute; top: 20px; left: 20px; background: rgba(29,30,24,0.42); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); color: white; padding: 9px 22px; border-radius: 30px; font-weight: 600; font-size: 0.82rem; letter-spacing: 1px; } .ba-label.after { background: rgba(148,87,44,0.78); border-color: rgba(255,255,255,0.35); } /* Interactive before/after slider */ .ba-slider { position: relative; width: 100%; max-width: 760px; aspect-ratio: 4 / 3; margin: 50px auto 0; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.2); cursor: ew-resize; user-select: none; touch-action: none; } .ba-after, .ba-before { display: block; width: 100%; height: 100%; object-fit: cover; } .ba-before { position: absolute; top: 0; left: 0; clip-path: inset(0 50% 0 0); } .ba-divider { position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 14px rgba(0,0,0,0.45); } .ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); border: 1px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 22px rgba(0,0,0,0.35); } .ba-handle::before { content: '⟷'; color: #fff; font-size: 1.15rem; font-weight: 700; } .ba-tag-before { left: 18px; right: auto; top: 18px; } .ba-tag-after { right: 18px; left: auto; top: 18px; } .ba-hint { text-align: center; margin-top: 16px; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); } @media (max-width: 768px) { .ba-slider { max-width: 100%; } } .transformation-text { text-align: center; margin-top: 40px; padding: 30px; background: rgba(255,255,255,0.1); border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); } .transformation-text p { font-size: 1.2rem; color: #fff; font-style: italic; } @media (max-width: 1024px) { .before-after-grid { grid-template-columns: 1fr; } } /* === AMBIENCE DAY/NIGHT === */ .ambience-container { max-width: 1200px; margin: 0 auto; } .ambience-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 100px; } .ambience-row:last-child { margin-bottom: 0; } .ambience-img-wrapper { height: 400px; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.15); } .ambience-label { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); color: white; padding: 8px 20px; border-radius: 30px; font-size: 0.9rem; } .ambience-text-content h3 { font-size: 2rem; margin-bottom: 15px; } .ambience-text-content p { opacity: 0.8; font-size: 1.1rem; line-height: 1.8; } @media (max-width: 1024px) { .ambience-row { grid-template-columns: 1fr; gap: 30px; } .ambience-row .ambience-text-content { order: 2; } .ambience-row .ambience-img-wrapper { order: 1; } } /* === GALLERY / DETAILS === */ .gallery-grid { display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 30px; align-items: center; max-width: 1200px; margin: 0 auto; } .gallery-arch { height: 550px; border-radius: 250px 250px 20px 20px; overflow: hidden; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.1); } .gallery-text { text-align: center; padding: 20px; } .gallery-text h3 { font-size: 2rem; margin-bottom: 15px; line-height: 1.2; } .gallery-text .separator { width: 50px; height: 2px; background: var(--primary); margin: 20px auto; display: block; } .gallery-text p { opacity: 0.7; font-size: 0.95rem; } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: 1fr; gap: 40px; } .gallery-text { order: -1; } } /* === FAN CARDS === */ .fan-container { position: relative; height: 500px; display: flex; justify-content: center; align-items: center; perspective: 1000px; margin-top: 50px; } .fan-card { position: absolute; width: 350px; height: 450px; background: white; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: zoom-in; left: 50%; transform: translateX(-50%) scale(0.9); opacity: 0; z-index: 1; } .fan-card img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .fan-section.active .fan-center { transform: translateX(-50%) scale(1.1) translateY(-20px); z-index: 10; opacity: 1; box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .fan-section.active .fan-left { transform: translateX(-120%) rotate(-5deg) scale(1); z-index: 5; opacity: 1; } .fan-section.active .fan-right { transform: translateX(20%) rotate(5deg) scale(1); z-index: 5; opacity: 1; } @media (max-width: 1024px) { .fan-container { height: auto; display: block; } .fan-card { position: relative; width: 100%; height: 300px; left: auto; transform: none !important; opacity: 1 !important; margin-bottom: 20px; } } /* === MEET HAMZAH / FOUNDER === */ .founder-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; max-width: 1100px; margin: 0 auto; } .founder-img-wrap { position: relative; } .founder-img-wrap img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); transition: transform 0.6s var(--ease-out-expo); } .founder-img-wrap:hover img { transform: scale(1.02); } .founder-img-wrap .circ { position: absolute; bottom: -14px; right: -14px; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; opacity: 0.2; animation: spin 20s linear infinite; } .founder-img-wrap .circ img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; } @keyframes spin { to { transform: rotate(360deg); } } .founder-label { font-size: 0.85rem; color: #999; margin-bottom: 6px; letter-spacing: 1px; } .founder-title { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 600; font-style: italic; color: rgba(185,145,115,0.5); margin-bottom: 16px; line-height: 1.05; } .founder-role { font-family: 'Outfit', sans-serif; font-size: 0.7rem; color: var(--primary); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 14px; font-weight: 600; } .founder-bio { font-size: 1rem; color: #666; line-height: 1.8; margin-bottom: 28px; } .timeline { display: flex; flex-direction: column; gap: 8px; } .tl-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--white); border: 1px solid rgba(0,0,0,0.03); transition: all 0.35s var(--ease-out-expo); box-shadow: 0 2px 8px rgba(0,0,0,0.015); } .tl-item:hover { transform: translateX(8px); box-shadow: 0 4px 16px rgba(0,0,0,0.04); } .tl-item .yr { font-family: var(--font-body); font-size: 0.7rem; color: #fff; white-space: nowrap; background: var(--primary-deep); padding: 4px 12px; border-radius: 6px; font-weight: 600; letter-spacing: 0.5px; } .tl-item .role { font-size: 0.85rem; color: #777; } @media (max-width: 1024px) { .founder-grid { grid-template-columns: 1fr; gap: 40px; } .founder-title { font-size: 2.5rem; } } /* === PROJECTS SECTION === */ .prj-list { max-width: 1100px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 24px; } .prj-card { border-radius: 22px; overflow: hidden; position: relative; min-height: 380px; display: grid; grid-template-columns: 1fr 1.1fr 1fr; cursor: pointer; transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo); } .prj-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.12); } .prj-bg { position: absolute; inset: 0; z-index: 0; } .prj-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px) brightness(.5) saturate(1.4); transform: scale(1.08); } .prj-glass { position: absolute; inset: 0; z-index: 1; background: rgba(90,65,45,.4); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); } .prj-glass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #413D3A 0%, #5a4a3d 100%); opacity: 0.06; pointer-events: none; } .prj-left { position: relative; z-index: 2; padding: 32px 26px; display: flex; flex-direction: column; justify-content: flex-end; color: rgba(255,255,255,0.6); } .prj-left .desc { font-size: 0.8rem; line-height: 1.65; margin-bottom: 24px; max-width: 210px; } .prj-left .idx { font-size: 0.7rem; margin-bottom: 6px; letter-spacing: 1px; } .prj-left .idx span { color: var(--primary); } .prj-left h3 { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 500; color: #fff; line-height: 1.1; } .prj-center { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 24px; } .prj-center img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,0.2); transition: transform 0.6s var(--ease-out-expo); } .prj-card:hover .prj-center img { transform: scale(1.03); } .prj-right { position: relative; z-index: 2; padding: 32px 26px; display: flex; flex-direction: column; justify-content: center; gap: 16px; color: rgba(255,255,255,0.5); } .prj-meta { font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; } .prj-meta strong { display: block; color: rgba(255,255,255,0.9); font-weight: 600; font-size: 0.85rem; font-family: var(--font-body); margin-top: 3px; } .prj-meta strong.hl { color: var(--primary); font-size: 0.9rem; } .prj-services { display: flex; flex-direction: column; gap: 3px; } .prj-services span { font-size: 0.8rem; color: rgba(255,255,255,0.65); font-weight: 500; } @media (max-width: 1024px) { .prj-card { grid-template-columns: 1fr; } .prj-center { display: none; } .prj-right { padding-top: 0; } } /* === TESTIMONIALS === */ .testi-grid { max-width: 1060px; margin: 40px auto 0; display: grid; grid-template-columns: 240px 1fr; gap: 14px; min-height: 380px; } .stats-box { background: var(--dark); border-radius: 22px; padding: 30px 22px; display: flex; flex-direction: column; justify-content: center; gap: 24px; position: relative; overflow: hidden; } .stats-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15; pointer-events: none; } .stats-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #2a2724 0%, #413D3A 100%); opacity: 0.12; pointer-events: none; } .stat { position: relative; z-index: 1; } .stat .num { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; color: #fff; line-height: 1; } .stat .lbl { font-size: 0.65rem; color: var(--primary); letter-spacing: 1px; margin-top: 3px; font-weight: 500; } .testi-card { background: #222; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; } .testi-card .tc-img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); } .testi-card:hover .tc-img { transform: scale(1.03); } .testi-card .tc-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .tc-idx { font-size: 0.65rem; color: rgba(255,255,255,0.2); margin-bottom: 10px; letter-spacing: 1px; } .tc-idx span { color: var(--primary); } .tc-quote { font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: 14px; font-style: italic; } .tc-footer { display: flex; align-items: center; justify-content: space-between; } .tc-author h4 { font-size: 0.9rem; color: #fff; font-weight: 600; } .tc-author span { font-size: 0.75rem; color: rgba(255,255,255,0.3); } .tc-arrows { display: flex; gap: 6px; } .tc-arrows button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s; } .tc-arrows button:hover { border-color: var(--primary); color: var(--primary); } @media (max-width: 768px) { .testi-grid { grid-template-columns: 1fr; } } /* === ROI === */ .roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 50px auto 40px; } .roi-card { background: white; padding: 40px 30px; border-radius: 22px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; } .roi-card:hover { transform: translateY(-15px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .roi-icon { font-size: 2.2rem; margin-bottom: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--light); width: 80px; height: 80px; border-radius: 50%; color: var(--primary); } .roi-card h3 { color: var(--dark); font-size: 1.4rem; margin-bottom: 15px; } .roi-card p { color: var(--dark); opacity: 0.8; font-size: 0.95rem; } @media (max-width: 768px) { .roi-grid { display: flex !important; flex-direction: column; gap: 20px; } .roi-card { width: 100% !important; } } /* === CONTACT FORM === */ .contact-form-wrap { max-width: 600px; margin: 50px auto 0; } .contact-form-wrap h3 { font-size: 2rem; text-align: center; margin-bottom: 8px; color: #fff; } .contact-form-wrap .csub { text-align: center; font-size: 0.95rem; color: rgba(255,255,255,0.6); margin-bottom: 30px; } .cf-fields { display: flex; flex-direction: column; gap: 14px; } .cf-fields input, .cf-fields textarea { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 16px 20px; color: #fff; font-family: var(--font-body); font-size: 0.95rem; transition: all 0.3s; outline: none; } .cf-fields input::placeholder, .cf-fields textarea::placeholder { color: rgba(255,255,255,0.25); } .cf-fields input:focus, .cf-fields textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(236,94,40,0.1); } .cf-fields textarea { resize: vertical; min-height: 100px; } .cf-btn { background: white; color: var(--primary); border: none; border-radius: 100px; padding: 16px 40px; font-size: 1rem; font-weight: 700; letter-spacing: 1px; transition: all 0.35s var(--ease-out-expo); width: fit-content; margin: 10px auto 0; display: block; box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .cf-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 36px rgba(0,0,0,0.15); } .cf-success { display: none; text-align: center; padding: 30px; background: rgba(255,255,255,0.08); border-radius: 20px; border: 1px solid rgba(255,255,255,0.15); margin-top: 20px; } .cf-success .check { font-size: 3rem; margin-bottom: 10px; } .cf-success h4 { color: #fff; font-size: 1.3rem; margin-bottom: 6px; } .cf-success p { color: rgba(255,255,255,0.6); font-size: 0.9rem; } /* === SOCIAL LINKS === */ .social-links { display: flex; justify-content: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 500; transition: all 0.35s var(--ease-out-expo); letter-spacing: 0.5px; } .social-link:hover { background: rgba(255,255,255,0.12); border-color: var(--primary); color: #fff; transform: translateY(-3px); } .social-link svg { width: 18px; height: 18px; } /* === FOOTER === */ .footer-section { text-align: center; padding: 40px 20px; } .footer-section .flogo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #999; letter-spacing: 2px; margin-bottom: 8px; } .footer-section .flogo span { color: var(--primary); } .footer-section p { font-size: 0.8rem; color: #bbb; } /* === LIGHTBOX === */ .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.98); z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lightbox.active { opacity: 1; pointer-events: auto; } .lightbox img { max-height: 85vh; max-width: 90vw; object-fit: contain; box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-radius: 8px; } .close-lb { position: absolute; top: 30px; right: 30px; font-size: 2rem; cursor: pointer; color: var(--dark); } /* === TESTI SECTION WATERMARK === */ .section-watermark { font-family: var(--font-heading); font-size: 5rem; font-weight: 600; font-style: italic; color: rgba(185,145,115,0.25); line-height: 1; text-align: center; margin-bottom: 10px; } @media (max-width: 768px) { .section-watermark { font-size: 3rem; } } /* === PROJECT MODAL === */ .prj-modal { backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); } .prj-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: none; justify-content: center; padding: 24px; overflow-y: auto; opacity: 0; transition: opacity .4s; } .prj-modal.open { display: flex; opacity: 1; } .prj-modal-body { background: var(--bg-canvas); border-radius: 28px; max-width: 900px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.15); margin: auto; overflow: hidden; transform: translateY(16px) scale(0.97); transition: transform .45s var(--ease-out-expo); } .prj-modal.open .prj-modal-body { transform: none; } .prj-modal-close { position: absolute; top: 18px; right: 18px; z-index: 10; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); border: none; font-size: 20px; color: #fff; display: flex; align-items: center; justify-content: center; transition: all .3s; cursor: pointer; } .prj-modal-close:hover { background: var(--primary-deep); transform: scale(1.1); } .prj-modal-hero { position: relative; } .prj-modal-hero img { width: 100%; height: 400px; object-fit: cover; } .prj-modal-hero .pm-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; } .prj-modal-hero .pm-overlay h1 { font-family: var(--font-heading); font-size: 2.4rem; color: #fff; font-weight: 600; } .prj-modal-hero .pm-overlay .pm-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .prj-modal-hero .pm-overlay .pm-tags span { padding: 5px 14px; border-radius: 100px; background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); font-size: 0.75rem; color: #fff; } .prj-modal-content { padding: 28px 32px 36px; } .pm-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; } .pm-det { padding: 14px; border-radius: 14px; background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.02); } .pm-det label { font-size: 0.6rem; color: #aaa; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 2px; } .pm-det span { font-size: 0.9rem; font-weight: 600; } .pm-img-block { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; margin-bottom: 36px; } .pm-img-block.rev { grid-template-columns: 1fr 1.3fr; } .pm-img-block img { width: 100%; border-radius: 18px; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 8px 28px rgba(0,0,0,0.06); } .pm-img-block.rev img { order: 2; } .pm-img-desc h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 500; margin-bottom: 8px; } .pm-img-desc p { font-size: 0.9rem; color: #777; line-height: 1.75; } .pm-img-full { margin-bottom: 36px; } .pm-img-full img { width: 100%; border-radius: 18px; object-fit: cover; box-shadow: 0 8px 28px rgba(0,0,0,0.06); } .pm-img-full p { text-align: center; font-size: 0.85rem; color: #999; margin-top: 10px; font-style: italic; } @media (max-width: 768px) { .prj-modal { backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); } .prj-modal { padding: 10px; } .pm-details { grid-template-columns: 1fr; } .pm-img-block, .pm-img-block.rev { grid-template-columns: 1fr; } .pm-img-block.rev img { order: 0; } .prj-modal-hero img { height: 260px; } } /* === PACKAGES === */ .packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 50px auto 0; } .pkg-card { border-radius: 22px; padding: 38px 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo); } .pkg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); } .pkg-standard { background: var(--white); border: 1px solid rgba(0,0,0,0.06); } .pkg-vip { background: linear-gradient(135deg, #1a1a1a 0%, #2d1a0f 50%, #1a1a1a 100%); color: #fff; border: 1px solid rgba(236,94,40,0.25); } .pkg-vip::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 70% 30%, rgba(236,94,40,0.15), transparent 50%); pointer-events: none; } .pkg-partner { background: var(--bg-canvas); border: 1px dashed rgba(236,94,40,0.4); } .pkg-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; margin-bottom: 16px; } .pkg-standard .pkg-badge { background: var(--bg-canvas); color: var(--dark); } .pkg-vip .pkg-badge { background: rgba(236,94,40,0.15); color: var(--primary); } .pkg-partner .pkg-badge { background: rgba(236,94,40,0.12); color: var(--primary); } .pkg-name { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; } .pkg-price { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1; margin-bottom: 4px; } .pkg-price small { font-size: 1rem; font-weight: 500; opacity: 0.6; } .pkg-launch { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); background: rgba(236,94,40,0.12); padding: 4px 12px; border-radius: 100px; margin-bottom: 18px; } .pkg-vip .pkg-launch { background: rgba(236,94,40,0.2); } .pkg-desc { font-size: 0.86rem; line-height: 1.7; opacity: 0.7; margin-bottom: 22px; } .pkg-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .pkg-features li { font-size: 0.86rem; display: flex; align-items: center; gap: 10px; } .pkg-features li::before { content: '✓'; font-weight: 700; font-size: 0.75rem; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pkg-standard .pkg-features li::before { background: var(--bg-canvas); color: var(--dark); } .pkg-vip .pkg-features li::before { background: rgba(236,94,40,0.15); color: var(--primary); } .pkg-partner .pkg-features li::before { background: rgba(236,94,40,0.12); color: var(--primary); } .pkg-delivery { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; opacity: 0.5; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(128,128,128,0.15); } .pkg-delivery span { display: block; font-size: 0.85rem; font-weight: 600; opacity: 1; margin-top: 4px; letter-spacing: 0; text-transform: none; } .pkg-cta { display: block; text-align: center; margin-top: 20px; padding: 13px 0; border-radius: 50px; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.3px; background: var(--primary-deep); color: #fff; transition: opacity 0.3s ease; } .pkg-cta:hover { opacity: 0.88; } .pkg-vip .pkg-cta { background: var(--primary-deep); } .pkg-partner .pkg-cta { background: var(--dark); } @media (max-width: 900px) { .packages-grid { grid-template-columns: 1fr; max-width: 420px; } } /* === FAQ === */ .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; margin: 50px auto 0; } .faq-item { background: var(--white); border-radius: 18px; padding: 24px 28px; cursor: pointer; transition: all 0.35s var(--ease-out-expo); border: 1px solid rgba(0,0,0,0.03); } .faq-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-q h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; line-height: 1.4; } .faq-toggle { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--bg-canvas); border: none; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--dark); transition: all 0.3s; } .faq-item.open .faq-toggle { background: var(--dark); color: #fff; transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-item.open .faq-answer { max-height: 300px; padding-top: 16px; } .faq-answer p { font-size: 0.88rem; color: #777; line-height: 1.75; } @media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } } /* === FINAL RESPONSIVE MOTION SYSTEM === */ .capicon { gap: 0; } .capicon .ci-art { flex: 0 0 78px; height: 72px; margin: 0 0 18px; } .capicon h4, .cap-box h3, .cap-box p, .capicon p { white-space: normal; overflow-wrap: normal; word-break: normal; } .cap-box h3 { line-height: 1.24; } .capicon h4 { display: block; width: 100%; margin: 0 0 7px; line-height: 1.28; letter-spacing: 0; font-kerning: normal; transform: none; } [data-icon="printer"] h4 { white-space: nowrap; } [data-icon="backdrop"] .ci-art { margin-bottom: 20px; } .sg-body { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linejoin: round; } .sg-paper { fill: rgba(176,112,60,.16); stroke: var(--primary-deep); stroke-width: 3; } .sg-line { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; } .isowrap { height: 520vh; max-width: 1120px; margin-top: 42px; position: relative; } .isostage { position: sticky; top: clamp(72px, 8vh, 110px); height: min(76vh, 760px); aspect-ratio: auto; isolation: isolate; } .room-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: opacity, transform, clip-path, filter; } #roomEmpty { z-index: 1; opacity: 0; } #roomOldFull { z-index: 3; } .old-piece { z-index: 4; opacity: 0; } #roomAxoBase { z-index: 5; opacity: 0; filter: grayscale(.72) sepia(.18) brightness(.78); } .new-piece { z-index: 6; opacity: 0; transform: translateY(22px) scale(.94); } #roomFinalBg { z-index: 8; opacity: 0; filter: blur(18px) brightness(.48); transform: scale(1.12); } #roomFinal { z-index: 9; opacity: 0; object-fit: contain; transform: scale(1.07); } #isoSvg { display: none !important; } .room-sheen { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 25%, rgba(255,255,255,.3) 46%, transparent 67%); transform: translateX(-75%); will-change: opacity, transform; } .room-notes { position: absolute; inset: 0; z-index: 7; pointer-events: none; } .room-note { position: absolute; opacity: 0; transform: translateY(10px); color: #2e241b; font-size: clamp(.62rem, .95vw, .84rem); font-weight: 600; letter-spacing: .04em; padding: 8px 11px; border-radius: 9px; background: rgba(253,250,244,.86); border: 1px solid rgba(72,50,32,.2); box-shadow: 0 8px 24px rgba(34,24,16,.12); backdrop-filter: blur(10px); } .room-note::after { content: ''; position: absolute; height: 1px; width: clamp(45px, 8vw, 95px); background: linear-gradient(90deg,#8f5631,rgba(143,86,49,.18)); transform-origin: left center; } .rn-material { left: 8%; top: 18%; } .rn-material::after { left: 100%; top: 50%; transform: rotate(24deg); } .rn-seating { left: 8%; bottom: 24%; } .rn-seating::after { left: 100%; top: 45%; transform: rotate(-17deg); } .rn-kitchen { right: 7%; top: 24%; } .rn-kitchen::after { right: 100%; top: 52%; transform: rotate(164deg); } .rn-lighting { right: 9%; bottom: 22%; } .rn-lighting::after { right: 100%; top: 45%; transform: rotate(198deg); } .isocap { z-index: 12; } .isosteps { position: sticky; top: calc(min(76vh, 760px) + clamp(82px, 10vh, 126px)); z-index: 8; } #brand .brandpin { height: 460vh; } #brand .brandpin-inner { position: sticky; top: 0; height: 100vh; } #brand .htrack { position: absolute; inset: 0; display: block; transform: none !important; } #brand .bcard { position: absolute; top: 0; left: 50%; flex: none; opacity: 1; transition: opacity .18s linear !important; transform-origin: center center; backface-visibility: hidden; will-change: transform, opacity; } #brand .bsteps2 { display: flex !important; } @media (max-width: 900px) { #brand { overflow: hidden; } #brand .brandpin { height: 430vh; } #brand .brandpin-inner { position: sticky; height: 100vh; } #brand .htrack { flex-wrap: nowrap; justify-content: initial; } #brand .htrack .bcard { position: absolute; flex: none; opacity: 1; } } @media (max-width: 700px) { .isowrap { height: 450vh; } .isostage { top: 72px; height: min(68vh, 600px); border-radius: 20px; } .isosteps { top: calc(min(68vh, 600px) + 82px); } #brand .brandpin { height: 400vh; } #brand .htrack-wrap { height: 410px; } } .app-shot { cursor: default; } .app-ui { aspect-ratio: 16/10; background: #f3f6f9; color: #172334; font-family: var(--font-body); overflow: hidden; } .app-top { height: 17%; background: #0c2740; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 7%; font-size: clamp(.48rem, .75vw, .72rem); } .app-brand { font-weight: 700; letter-spacing: .08em; } .app-nav { opacity: .72; word-spacing: .55em; } .app-body { padding: 5% 6%; } .app-title { display: flex; justify-content: space-between; align-items: center; font-size: clamp(.58rem, .95vw, .9rem); font-weight: 700; margin-bottom: 5%; } .app-btn { background: #b0703c; color: #fff; border-radius: 999px; padding: .48em 1em; font-size: .78em; } .app-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; } .app-stat { background: #fff; border: 1px solid #e5e9ee; border-radius: 9px; padding: 11%; } .app-stat span { display: block; color: #718096; font-size: clamp(.38rem, .58vw, .56rem); } .app-stat strong { display: block; font-size: clamp(.58rem, 1vw, .92rem); margin-top: 8%; color: #18314a; } .app-chart { height: 70px; margin-top: 5%; display: flex; gap: 4%; align-items: end; padding: 0 3%; border-bottom: 1px solid #d8dee7; } .app-chart i { flex: 1; background: linear-gradient(#c3824c,#8f5631); border-radius: 4px 4px 0 0; } .app-form { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; } .app-field { background:#fff; border:1px solid #dfe5ec; border-radius:7px; padding:5%; color:#6d7886; font-size:clamp(.4rem,.62vw,.6rem); } .app-table { margin-top:5%; background:#fff; border-radius:8px; overflow:hidden; } .app-row { display:grid; grid-template-columns: 1.4fr .7fr .7fr; gap:3%; padding:3% 5%; border-bottom:1px solid #eef1f4; font-size:clamp(.38rem,.6vw,.58rem); } .app-row.head { background:#e9eef3; font-weight:700; color:#425466; } .app-total { margin-top:4%; margin-left:auto; width:45%; background:#18314a; color:#fff; padding:4%; border-radius:8px; display:flex; justify-content:space-between; font-size:clamp(.42rem,.7vw,.66rem); } @media (prefers-reduced-motion: reduce) { .isowrap, #brand .brandpin { height: auto; } .isostage, #brand .brandpin-inner, .isosteps { position: static; height: auto; } #roomOldFull, #roomEmpty, #roomAxoBase, .old-piece, .new-piece, .room-notes { display: none; } #roomFinal { position: relative; opacity: 1 !important; transform: none !important; aspect-ratio: 16/10; } } /* Sticky scenes must not have a scrolling overflow ancestor. */ html { overflow-x: clip; } body { overflow-x: clip; } #before-after, #brand { overflow: visible !important; } #brand .htrack-wrap { perspective: 1500px; } #brand .bcard { transition: none !important; } #brand .blogo img { object-fit: contain !important; transform: none !important; } #brand .blogo { background: var(--logo-bg, #0c1e33); } #brand .bcard[data-logo-theme] .blogo img { mix-blend-mode: screen; } #brand .bcard[data-logo-theme="lav"] .blogo img { mix-blend-mode: normal; } #brand { --brand-ink: #f6f1e6; } #brand h2, #brand .bmeta h4, #brand .bsector, #brand .bwork, #brand .center-text p { color: var(--brand-ink) !important; } .capicon .ci-art:has(svg) { width: 132px; height: 118px; flex-basis: 118px; } .isostage { background: #b5a18a; } #roomAxoBase, .new-piece { object-fit: contain; } @media (max-width: 700px) { .room-note { font-size: 12px; max-width: 42%; } .room-note::after { width: 24px; } } html{scroll-behavior:auto!important;overflow-x:clip}body{overflow-x:clip} #before-after{overflow:visible!important;background:transparent!important;} #photoStory{height:660vh;height:660svh;position:relative;width:100%;margin:30px auto 0;} #photoStage{position:sticky;top:66px;height:calc(100vh - 82px);height:calc(100svh - 82px);min-height:340px;isolation:isolate;background:#24211e;overflow:hidden;} #photoCanvas{display:block;width:100%;height:100%;} .photo-header{position:absolute;left:clamp(14px,3vw,44px);right:clamp(14px,3vw,44px);top:22px;z-index:2;display:flex;justify-content:space-between;gap:16px;color:#faf5ea;font:500 14px/1.5 Outfit,sans-serif;text-shadow:0 2px 12px #000;pointer-events:none;} .photo-header small{font-size:12px;opacity:.8;} .photo-controls{position:absolute;z-index:3;bottom:20px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 28px));display:flex;align-items:center;gap:8px;background:#1a1816cc;border:1px solid #ffffff2a;backdrop-filter:blur(12px);border-radius:32px;padding:9px 14px;} .photo-controls button{border:0;background:transparent;color:#f6eee0;padding:9px 12px;border-radius:22px;font:500 14px Outfit,sans-serif;cursor:pointer;white-space:nowrap;} .photo-controls button[aria-pressed=true]{background:#f5eddd;color:#2a231c} .photo-controls button:focus-visible,.photo-controls input:focus-visible{outline:2px solid #edd5aa;outline-offset:4px;} .photo-controls input{min-width:40px;width:100%;accent-color:#dbc194;cursor:ew-resize;} .photo-meter{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff16;}#photoProgress{height:100%;background:#e2cda7;width:0;} #photoStatus{position:absolute;inset:40% 15% auto;text-align:center;color:#fff;font:16px/1.5 Outfit,sans-serif;} .anim{transition-property:opacity,transform!important;transition-duration:1.05s!important;transition-timing-function:cubic-bezier(.2,.65,.2,1)!important;transition-delay:var(--motion-stagger,0ms)!important;} .reveal-mask>span{transition-duration:1.05s!important;transition-timing-function:cubic-bezier(.2,.65,.2,1)!important;} @media(max-width:700px){#photoStory{height:570svh;}#photoStage{top:64px;height:calc(100svh - 76px);} .photo-header{top:14px;font-size:12px;}.photo-header small{display:none}.photo-controls{bottom:14px;padding:6px 8px;gap:2px;}.photo-controls button{padding:9px;font-size:12px;}.anim{transition-duration:.7s!important;}} @media(prefers-reduced-motion:reduce){#photoStory{height:auto;}#photoStage{position:relative;top:0;height:80svh}.anim,.reveal-mask>span{transition:none!important;opacity:1!important;transform:none!important;}} :root{--site-bg:#edf0f2;--site-ink:#202326;--glass:rgba(255,255,255,.58);--glass-line:rgba(255,255,255,.78);--glass-shadow:0 24px 80px rgba(35,42,48,.11)} html,body{background:var(--site-bg)!important;color:var(--site-ink)} body{background-image:radial-gradient(circle at 15% 10%,rgba(255,255,255,.95),transparent 34%),radial-gradient(circle at 87% 43%,rgba(215,221,226,.62),transparent 31%),linear-gradient(135deg,#f6f7f8 0%,#e9edef 53%,#f5f6f7 100%)!important;background-attachment:fixed} header.hero{margin:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important} section:not(.project-story){margin:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:var(--site-ink)!important;padding-top:clamp(82px,10vw,145px)!important;padding-bottom:clamp(82px,10vw,145px)!important;isolation:isolate} section:not(.project-story)::before{content:"";position:absolute;z-index:-1;inset:clamp(25px,3vw,48px) clamp(14px,4vw,66px);background:var(--glass);border:1px solid var(--glass-line);border-radius:clamp(24px,3vw,44px);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%)} section.card-dark:not(.project-story) h2,section.card-dark:not(.project-story) h3,section.card-dark:not(.project-story) h4,section.card-dark:not(.project-story) p{color:var(--site-ink)!important} section.card-dark:not(.project-story) .accent-text{color:var(--primary)!important} #before-after.project-story{margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;background:#edf0f2!important;color:#202326;isolation:isolate} .project-stage{position:relative;height:100%;background:linear-gradient(135deg,#f4f6f7,#e7ebee);} .project-panel{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,58%) minmax(0,42%);overflow:hidden;background:transparent} .project-media{position:relative;min-width:0;height:100%;overflow:hidden;margin:0;background:transparent;border:0;box-shadow:none} .project-media img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:center center;border:0!important;border-radius:0!important;box-shadow:none!important;image-rendering:auto;will-change:transform;backface-visibility:hidden} .project-copy{align-self:center;justify-self:center;width:min(78%,600px);padding:clamp(28px,3.5vw,58px);background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.82);border-radius:32px;box-shadow:0 25px 80px rgba(31,38,43,.14);-webkit-backdrop-filter:blur(25px) saturate(150%);backdrop-filter:blur(25px) saturate(150%);min-width:0;will-change:transform,opacity} .project-panel:not(.reverse) .project-copy{margin-left:-8%;position:relative;z-index:3}.project-panel.reverse .project-media{grid-column:2;grid-row:1}.project-panel.reverse .project-copy{grid-column:1;grid-row:1;margin-right:-8%;position:relative;z-index:3} .project-copy .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#9b744d;display:block;margin-bottom:20px} .project-copy h2{font-size:clamp(31px,3.35vw,58px);line-height:1.06;letter-spacing:-.038em;margin:0 0 22px;color:#202326} .project-copy p{font-size:clamp(16px,1.12vw,18px);line-height:1.72;color:#535a5f;max-width:540px;margin:0} .project-copy .story-rule{display:block;width:100%;height:1px;background:linear-gradient(90deg,#af865e,transparent);margin:25px 0;transform-origin:left;will-change:transform} .project-copy dl{margin:18px 0 0}.project-copy dt{font-size:15px;font-weight:700;color:#25292c;margin:11px 0 2px}.project-copy dd{font-size:13px;line-height:1.42;color:#62686c;margin:0} .project-panel.workflow h2{font-size:clamp(28px,3vw,46px)} .project-story.is-pinned{height:var(--story-height)}.is-pinned .project-stage{position:sticky;top:0;height:100svh;overflow:hidden}.is-pinned .project-panel{position:absolute;inset:0;min-height:0;opacity:0;pointer-events:none;will-change:opacity,transform}.is-pinned .project-panel.is-current{pointer-events:auto} .project-nav{display:none}.is-pinned .project-nav{display:flex;position:absolute;z-index:25;bottom:20px;left:5%;right:5%;gap:5px;align-items:center}.project-nav button{height:25px;flex:1;border:0;border-top:2px solid rgba(28,33,37,.2);background:none;padding:0;cursor:pointer;position:relative}.project-nav button::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#9d744d;transform:scaleX(var(--fill,0));transform-origin:left}.project-nav button:focus-visible{outline:2px solid #222;outline-offset:4px}.project-counter{font:12px monospace;white-space:nowrap;margin-left:14px;color:#303438} #before-after .reveal-mask,#before-after .reveal-mask>span{opacity:1!important;transform:none!important;overflow:visible!important} @media(max-width:760px){section:not(.project-story)::before{inset:16px 8px;border-radius:24px}.project-panel,.project-panel.reverse{grid-template-columns:1fr;grid-template-rows:56% 44%}.project-panel .project-media,.project-panel.reverse .project-media{grid-column:1;grid-row:1}.project-panel .project-copy,.project-panel.reverse .project-copy{grid-column:1;grid-row:2;width:auto;margin:-26px 14px 42px!important;padding:23px 24px;border-radius:24px;align-self:start;z-index:3}.project-copy h2{font-size:29px;margin-bottom:12px}.project-copy p{font-size:15px;line-height:1.5}.project-copy .eyebrow{font-size:11px;margin-bottom:9px}.project-copy .story-rule{margin:13px 0}.project-panel.workflow{grid-template-rows:34% 66%}.project-panel.workflow .project-copy{max-height:61svh;overflow:auto}.project-copy dt{font-size:13px;margin-top:7px}.project-copy dd{font-size:12px;line-height:1.3}.project-nav{left:18px!important;right:18px!important;bottom:10px!important}.project-counter{display:none}} @media(prefers-reduced-motion:reduce),(max-height:620px){#before-after.project-story{height:auto!important}.project-stage{position:relative!important;height:auto!important;overflow:visible!important}.project-panel,.project-panel.reverse{position:relative!important;opacity:1!important;min-height:100svh;pointer-events:auto!important;transform:none!important}.project-media,.project-copy,.project-media img{transform:none!important;opacity:1!important}.project-nav{display:none!important}} :root{--primary:#3f464c!important;--primary-deep:#252a2f!important;--ochre:#697178!important;--terracotta:#596168!important;--olive:#747c82!important;--dark:#202428!important;--deep:#2d3236!important;--stone:#cfd4d8!important;--light:#f6f7f8!important;--white:#fbfcfc!important;--bg-canvas:#eef1f3!important;--card-radius:0px!important} html,body{background:#f1f3f4!important;color:#202428!important} body{background-image:radial-gradient(circle at 12% 7%,rgba(255,255,255,.98),transparent 34%),radial-gradient(circle at 88% 38%,rgba(221,225,228,.66),transparent 31%),linear-gradient(145deg,#fafbfb 0%,#edf0f2 50%,#f7f8f9 100%)!important;background-attachment:fixed!important} body.canvas-ivory,body.canvas-earth,body.canvas-char{background-color:#f1f3f4!important} section:not(.project-story){background:transparent!important;color:#202428!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-top:clamp(86px,10vw,150px)!important;padding-bottom:clamp(86px,10vw,150px)!important} section:not(.project-story)::before{content:none!important;display:none!important} .card-dark:not(.project-story),.card-cream,.card-white,.card-primary{background:transparent!important;color:#202428!important} .card-dark:not(.project-story) h2,.card-dark:not(.project-story) h3,.card-dark:not(.project-story) h4,.card-dark:not(.project-story) p,.card-dark:not(.project-story) li{color:#202428!important} .accent-text,.founder-label,.founder-role,.prj-band-meta,.vtag,.project-copy .eyebrow{color:#5c646a!important} .separator,.stage-line{background:#899198!important}.chip,.prj-band-tags span{border-color:rgba(49,56,61,.18)!important;color:#454c51!important;background:rgba(255,255,255,.54)!important} .nav-container{background:rgba(250,251,251,.72)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 10px 35px rgba(30,37,42,.08)!important;-webkit-backdrop-filter:blur(20px) saturate(145%);backdrop-filter:blur(20px) saturate(145%)} .hero{height:100svh!important;min-height:680px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:hidden!important} .hero::before,.hero::after{position:absolute;z-index:1;top:43%;transform:translateY(-50%);font-family:var(--font-body);font-size:clamp(58px,9.2vw,150px);font-weight:600;line-height:.82;letter-spacing:-.075em;color:#24282b;white-space:nowrap;pointer-events:none} .hero::before{content:"HAMZAH";left:3.5vw}.hero::after{content:"SADEQ";right:4vw} .hero-bg{z-index:2!important;left:50%!important;top:12%!important;width:clamp(300px,32vw,520px)!important;height:70%!important;transform:translateX(-50%)!important;object-fit:cover!important;object-position:center!important;border-radius:clamp(18px,2vw,30px)!important;box-shadow:0 34px 90px rgba(28,34,39,.19)!important;filter:saturate(.82) contrast(.96)!important} .hero-content{z-index:4!important;position:absolute!important;left:50%!important;bottom:4.5vh!important;transform:translateX(-50%)!important;width:min(760px,88vw)!important;padding:22px 28px!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:24px!important;background:rgba(250,251,251,.72)!important;box-shadow:0 22px 65px rgba(31,38,43,.13)!important;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);color:#252a2e!important} .hero-content h1,.hero-content>p:first-child,.hero-tags{display:none!important}.hero-content p{color:#444b50!important}.hero-content p[style*="italic"]{color:#31373b!important;font-family:var(--font-body)!important;font-style:normal!important;font-size:1.05rem!important;font-weight:600!important;margin:0!important}.hero-content p[style*="max-width"]{font-size:.9rem!important;line-height:1.55!important;margin:8px auto 0!important}.hero-cta-row{margin-top:15px!important}.hero-btn-primary{background:#252a2e!important;color:#fff!important}.hero-btn-ghost{border-color:#7e868c!important;color:#30363a!important;background:rgba(255,255,255,.42)!important}.scroll-down{display:none!important} .founder-img-wrap,.shot,.prj-band-bg,.ci-art,.app-shot,.app-screen,.bvisual,.fab-visual{border:0!important;border-radius:clamp(18px,2vw,30px)!important;box-shadow:0 24px 70px rgba(35,42,47,.13)!important;overflow:hidden} .founder-grid>div:last-child,.cap-2>div,.cap-box,.study-step,.roi-card,.pkg-card,.faq-item,.testi-card,.bcard,.fab-card,.app-card,.sticky-left,.sticky-right{background:rgba(255,255,255,.56)!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:0 18px 55px rgba(36,43,48,.09)!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)} .founder-grid>div:last-child,.cap-2>div{padding:clamp(25px,3.5vw,48px)!important;border-radius:28px!important}.cap-box,.study-step,.roi-card,.pkg-card,.faq-item,.testi-card,.bcard,.fab-card,.app-card{border-radius:22px!important} .project-stage{background:transparent!important}.project-copy{background:rgba(250,251,251,.72)!important;border-color:rgba(255,255,255,.9)!important;color:#202428!important}.project-copy h2{color:#202428!important}.project-copy p,.project-copy dd{color:#555d62!important}.project-copy dt{color:#262b2f!important}.project-copy .story-rule{background:linear-gradient(90deg,#586168,transparent)!important}.project-nav button::before{background:#485158!important}.project-media{background:transparent!important;border:0!important;box-shadow:none!important}.project-media img{border:0!important;box-shadow:none!important;background:transparent!important} .prj-band{background:transparent!important;border-color:rgba(45,52,57,.13)!important}.prj-band:hover{background:rgba(255,255,255,.5)!important}.pkg-card.featured{border-color:#5a6268!important}.pkg-badge,.metric,.m-n,.study-num{color:#4c555b!important}.app-chart i{background:linear-gradient(#6d757b,#343a3f)!important} @media(max-width:760px){.hero{min-height:720px!important}.hero::before,.hero::after{font-size:clamp(47px,17vw,78px);top:27%;z-index:3;color:#24282b}.hero::before{left:4vw}.hero::after{right:4vw;top:38%}.hero-bg{top:15%!important;width:68vw!important;height:57%!important}.hero-content{bottom:3vh!important;padding:18px 20px!important}.hero-content p[style*="max-width"]{display:none!important}.founder-grid>div:last-child,.cap-2>div{padding:22px!important}} :root{--primary:#465057!important;--primary-deep:#252b30!important;--ochre:#687279!important;--terracotta:#59636a!important;--olive:#747d83!important;--stone:#cbd1d5!important;--light:#f5f7f8!important;--white:#fcfdfd!important;--bg-canvas:#eef1f3!important} html,body{background:#f1f3f5!important;color:#1f2529!important}body{background-image:radial-gradient(circle at 12% 8%,#fff 0,rgba(255,255,255,.72) 24%,transparent 43%),radial-gradient(circle at 88% 48%,rgba(218,223,227,.72),transparent 37%),linear-gradient(145deg,#f9fafb,#e9edf0 54%,#f7f8f9)!important} .nav-container{width:100%!important;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.nav-container.scrolled .nav{background:rgba(239,242,244,.88)!important;border:1px solid rgba(255,255,255,.96)!important;box-shadow:0 10px 34px rgba(28,35,40,.11)!important;-webkit-backdrop-filter:blur(26px) saturate(115%)!important;backdrop-filter:blur(26px) saturate(115%)!important;padding-left:30px!important;padding-right:30px!important;max-width:calc(100vw - 28px)} .hero::before,.hero::after{inset:auto!important;width:auto!important;height:auto!important;bottom:auto!important;background:none!important;mix-blend-mode:normal!important}.hero{background:radial-gradient(circle at 50% 35%,rgba(207,214,219,.8),transparent 38%)!important}.hero-bg{filter:saturate(.58) contrast(1.04) brightness(1.04) hue-rotate(-5deg)!important;box-shadow:0 38px 100px rgba(28,35,40,.2)!important}.hero-content{background:rgba(246,248,249,.76)!important;border:1px solid rgba(255,255,255,.98)!important;box-shadow:0 24px 70px rgba(28,35,40,.16)!important;-webkit-backdrop-filter:blur(30px) saturate(125%)!important;backdrop-filter:blur(30px) saturate(125%)!important} .sticky-left,.sticky-right{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.sticky-left{padding:0!important}.sticky-right{padding:0!important}.sr-item{background:rgba(248,250,251,.74)!important;border:1px solid rgba(255,255,255,.98)!important;border-radius:24px!important;box-shadow:0 18px 52px rgba(31,38,43,.1)!important;-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%)} .section-watermark{color:#2c3338!important;opacity:1!important}.projects-section .center-text h2,.projects-section .center-text div{color:#262c31!important}.prj-band-bg img{opacity:1!important;filter:none!important}.prj-band:hover .prj-band-bg img{opacity:.88!important}.prj-band::after{background:linear-gradient(90deg,rgba(22,27,31,.56),rgba(22,27,31,.08) 64%,rgba(22,27,31,.18))!important}.prj-band-in,.prj-band-in h3,.prj-band-meta,.prj-band-idx{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.3)} .accent-text,.founder-label,.founder-role,.vtag,.sticky-eyebrow,.project-copy .eyebrow{color:#586269!important}.center-text p,.founder-bio,.cap-box p,.sticky-hint,.sr-item p,section p{color:#454d52!important}.center-text h2,section h2,section h3,section h4{color:#20262a!important}.scroll-progress{background:#465057!important}[stroke="#B0703C"],[stroke="#94572C"]{stroke:#4d575e!important}[fill="#94572C"]{fill:#4d575e!important} .founder-grid>div:last-child,.cap-2>div,.cap-box,.study-step,.roi-card,.pkg-card,.faq-item,.testi-card,.bcard,.fab-card,.app-card,.sr-item{background:rgba(248,250,251,.74)!important;border-color:rgba(255,255,255,.98)!important;box-shadow:0 20px 62px rgba(31,38,43,.12)!important;-webkit-backdrop-filter:blur(25px) saturate(120%)!important;backdrop-filter:blur(25px) saturate(120%)!important}.cap-box[style*="background:var(--deep)"]{background:#2c3338!important;border-color:#2c3338!important}.cap-box[style*="background:var(--deep)"] h3,.cap-box[style*="background:var(--deep)"] p{color:#f4f6f7!important} #before-after.project-story{background:#edf0f2!important}.project-stage{background:#edf0f2!important}.project-panel,.project-panel.reverse{display:block!important;background:#edf0f2!important}.project-media,.project-panel.reverse .project-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;grid-column:auto!important;grid-row:auto!important;clip-path:inset(0);will-change:opacity,transform,clip-path}.project-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,18,21,.35),transparent 48%,rgba(13,18,21,.08));pointer-events:none}.project-panel.reverse .project-media::after{background:linear-gradient(270deg,rgba(13,18,21,.35),transparent 48%,rgba(13,18,21,.08))}.project-media img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important;opacity:1!important;transform-origin:center center}.project-copy,.project-panel:not(.reverse) .project-copy,.project-panel.reverse .project-copy{position:absolute!important;z-index:4!important;left:6vw!important;right:auto!important;bottom:9vh!important;top:auto!important;width:min(520px,42vw)!important;margin:0!important;padding:clamp(26px,3.3vw,48px)!important;background:rgba(244,247,248,.72)!important;border:1px solid rgba(255,255,255,.98)!important;border-radius:28px!important;box-shadow:0 26px 75px rgba(23,30,35,.2)!important;-webkit-backdrop-filter:blur(30px) saturate(120%)!important;backdrop-filter:blur(30px) saturate(120%)!important}.project-panel.reverse .project-copy{left:auto!important;right:6vw!important}.project-copy .story-rule{background:linear-gradient(90deg,#4e5960,transparent)!important}.project-nav button::before{background:#465057!important} #brand{overflow:visible!important}#brand .brandpin-inner{overflow:hidden!important}#brand .htrack-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:visible!important}#brand .htrack{position:absolute!important;inset:0!important}#brand .bcard{top:50%!important;left:50%!important;width:min(330px,27vw)!important;margin:0!important;transform-origin:center!important;border-radius:28px!important;background:rgba(248,250,251,.84)!important;box-shadow:0 28px 80px rgba(24,31,36,.18)!important}#brand .bcard .blogo{aspect-ratio:1/1!important;border-radius:28px!important}#brand .bcard .bmeta{display:none!important}.brand-side{position:absolute;z-index:160;top:50%;width:min(25vw,390px);transform:translateY(-50%);pointer-events:none}.brand-side.left{left:7vw;text-align:left}.brand-side.right{right:7vw;text-align:right}.brand-side .brand-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#667078;margin-bottom:14px}.brand-side h3{font-size:clamp(32px,4vw,66px);line-height:.98;margin:0 0 18px;color:#20262a!important}.brand-side p{font-size:clamp(14px,1.1vw,17px);line-height:1.65;color:#4b545a!important}.brand-side .brand-work{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:18px;color:#687279}.brand-side-inner{will-change:opacity,transform;transition:opacity .22s ease} body>section:not(.project-story)>*{filter:none!important;opacity:1!important}.anim{transition:opacity 1.15s cubic-bezier(.2,.68,.2,1),transform 1.35s cubic-bezier(.16,1,.3,1)!important}.anim.delay-200{transition-delay:.11s!important}.anim.delay-300{transition-delay:.19s!important}.anim.delay-400{transition-delay:.27s!important} @media(max-width:760px){.hero::before,.hero::after{font-size:clamp(44px,16vw,76px)!important}.project-copy,.project-panel:not(.reverse) .project-copy,.project-panel.reverse .project-copy{left:14px!important;right:14px!important;bottom:42px!important;width:auto!important;padding:22px!important}.project-media::after,.project-panel.reverse .project-media::after{background:linear-gradient(0deg,rgba(15,20,24,.4),transparent 58%)!important}#brand .bcard{width:min(235px,62vw)!important}.brand-side{top:auto;transform:none;width:42vw}.brand-side.left{left:18px;bottom:64px}.brand-side.right{right:18px;top:86px;text-align:right}.brand-side h3{font-size:25px}.brand-side p{font-size:12px;line-height:1.45}.brand-side .brand-work{font-size:10px}.nav-container.scrolled .nav{padding-left:18px!important;padding-right:18px!important}} :root{--primary:#49535a!important;--primary-deep:#20262a!important;--ochre:#667078!important;--terracotta:#59636a!important;--olive:#737d84!important;--dark:#20262a!important;--deep:#2b3237!important;--stone:#cbd1d5!important;--light:#f5f7f8!important;--white:#fcfdfd!important;--bg-canvas:#edf0f2!important} html,body{background:#edf0f2!important;color:#20262a!important}body{background-image:radial-gradient(circle at 12% 4%,rgba(255,255,255,.98),transparent 34%),radial-gradient(circle at 88% 45%,rgba(214,220,224,.7),transparent 36%),linear-gradient(145deg,#fafbfc,#e9edf0 54%,#f7f8f9)!important} body>section:not(.project-story-v13){padding-top:clamp(58px,6.5vw,96px)!important;padding-bottom:clamp(58px,6.5vw,96px)!important}body>section.project-story-v13>*{transform:none!important;filter:none!important;opacity:1!important;animation:none!important} .intro-flow{position:relative;height:225svh!important;min-height:1450px;margin:0!important;padding:0!important;background:transparent!important;overflow:visible}.intro-sticky{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.96),transparent 30%),linear-gradient(145deg,#f8fafb,#e6ebee 62%,#f5f7f8)} .intro-sticky:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 44%,rgba(202,210,215,.24));z-index:-1}.intro-name{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw;pointer-events:none}.intro-name span{font-family:var(--font-body);font-size:clamp(64px,10.8vw,178px);font-weight:600;letter-spacing:-.078em;line-height:.8;color:#20262a;white-space:nowrap}.intro-portrait{position:absolute;z-index:2;left:50%;top:9svh;width:min(34vw,520px);height:78svh;margin:0;overflow:hidden;border-radius:clamp(22px,2.3vw,36px);box-shadow:0 38px 105px rgba(25,32,37,.19);transform:translate3d(-50%,0,0);will-change:transform}.intro-portrait img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8) contrast(1.03);transform:scale(1.015)} .intro-role{position:absolute;z-index:4;left:50%;bottom:3.5svh;width:min(760px,88vw);padding:18px 26px;text-align:center;color:#252c31;font-size:clamp(13px,1.1vw,17px);line-height:1.55;letter-spacing:.03em;border:1px solid rgba(255,255,255,.95);border-radius:22px;background:rgba(247,249,250,.72);box-shadow:0 20px 60px rgba(28,35,40,.12);-webkit-backdrop-filter:blur(27px) saturate(125%);backdrop-filter:blur(27px) saturate(125%);transform:translateX(-50%);will-change:transform,opacity}.intro-role b{display:block;margin-bottom:3px;font-size:clamp(16px,1.55vw,24px);letter-spacing:-.02em;color:#20262a} .intro-about{position:absolute;z-index:5;left:6vw;top:50%;width:min(43vw,620px);padding:clamp(28px,4vw,58px);border:1px solid rgba(255,255,255,.98);border-radius:30px;background:rgba(248,250,251,.7);box-shadow:0 28px 82px rgba(28,35,40,.14);-webkit-backdrop-filter:blur(32px) saturate(122%);backdrop-filter:blur(32px) saturate(122%);opacity:0;transform:translate3d(-52px,-50%,0);will-change:transform,opacity}.intro-about>span{display:block;margin-bottom:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#647078}.intro-about h2{font-size:clamp(40px,5.3vw,82px);line-height:.92;letter-spacing:-.055em;color:#20262a!important;margin:0 0 25px}.intro-about>p{font-size:clamp(15px,1.15vw,18px);line-height:1.72;color:#465057!important;max-width:55ch}.intro-services{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:24px}.intro-services span{padding:12px 10px;text-align:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#384148;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(255,255,255,.46)}.intro-progress{position:absolute;z-index:8;left:0;bottom:0;width:100%;height:3px;background:rgba(48,57,63,.09)}.intro-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#465159} .project-story-v13{position:relative;height:var(--project-height,800svh)!important;min-height:5200px;margin:0!important;padding:0!important;background:#edf0f2!important}.project-stage-v13{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 38% 42%,rgba(255,255,255,.92),transparent 39%),linear-gradient(145deg,#f7f9fa,#e5eaed 68%,#f4f6f7)}.project-panel-v13{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,32vw);align-items:center;gap:clamp(24px,4vw,76px);padding:clamp(74px,8vh,110px) 5.5vw clamp(70px,8vh,104px);opacity:0;pointer-events:none;will-change:opacity}.project-panel-v13:first-child{opacity:1}.project-media-v13{position:relative;display:grid;place-items:center;width:100%;height:min(70svh,760px);margin:0;background:transparent;transform-origin:center;will-change:transform,opacity}.project-media-v13 img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;max-height:min(70svh,760px);border:0;border-radius:clamp(14px,1.4vw,24px);background:transparent;box-shadow:0 26px 75px rgba(28,35,40,.13);filter:none!important;opacity:1!important;will-change:transform,opacity}.project-media-v13.pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,22px)}.project-media-v13.pair img{width:100%;height:min(66svh,710px);object-fit:contain}.project-panel-v13.boards .project-media-v13 img{object-fit:contain!important;background:rgba(255,255,255,.18);box-shadow:0 18px 55px rgba(28,35,40,.09)}.project-copy-v13{position:relative;z-index:3;padding:clamp(25px,3.2vw,46px);border:1px solid rgba(255,255,255,.97);border-radius:28px;background:rgba(248,250,251,.69);box-shadow:0 25px 74px rgba(28,35,40,.13);-webkit-backdrop-filter:blur(31px) saturate(122%);backdrop-filter:blur(31px) saturate(122%);will-change:transform,opacity}.project-copy-v13>span{display:block;margin-bottom:18px;font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:#626d74}.project-copy-v13 h2{font-size:clamp(34px,4vw,64px);line-height:.94;letter-spacing:-.05em;color:#20262a!important;margin:0 0 19px}.project-copy-v13 p{font-size:clamp(14px,1vw,17px);line-height:1.68;color:#49535a!important}.project-progress-v13{position:absolute;z-index:20;left:5.5vw;right:5.5vw;bottom:25px;display:flex;align-items:center;gap:8px}.project-progress-v13 i{height:2px;flex:1;background:rgba(45,54,60,.15);transform-origin:left}.project-progress-v13 i:after{content:"";display:block;width:100%;height:100%;background:#465159;transform:scaleX(var(--fill,0));transform-origin:left}.project-progress-v13 b{margin-left:10px;font-size:10px;letter-spacing:.15em;color:#59636a} .study-step,.study-compare,.metric-bar,.roi-card,.pkg-card,.faq-item,.testi-card,.contact-form-wrap,.social-link,.skill-col,.casestudy,.app-card,.fab-card{background:rgba(248,250,251,.7)!important;border:1px solid rgba(255,255,255,.96)!important;box-shadow:0 20px 62px rgba(29,36,41,.1)!important;-webkit-backdrop-filter:blur(25px) saturate(118%)!important;backdrop-filter:blur(25px) saturate(118%)!important}.sc-designer,.sc-budget{border:0!important}.sc-designer{background:rgba(249,251,252,.82)!important;color:#20262a!important}.sc-budget,.pkg-card.featured{background:#2b3237!important;border-color:#2b3237!important;color:#f5f7f8!important}.sc-budget *,.pkg-card.featured *{color:#f5f7f8!important}.sc-arrow,.pkg-badge,.metric,.m-n,.study-num{color:#59646b!important}.pkg-card:not(.featured) .pkg-badge{background:#dfe4e7!important;color:#30383e!important}.pkg-card.featured .pkg-badge{background:rgba(255,255,255,.15)!important;color:#fff!important}.pkg-btn,.hero-btn-primary{background:#252c31!important;color:#fff!important;border-color:#252c31!important}.pkg-card.featured .pkg-btn{background:#f4f6f7!important;color:#252c31!important}.pkg-card,.study-compare{background-image:none!important}.pkg-card:before,.pkg-card:after{border-color:rgba(74,84,91,.18)!important}.app-chart i{background:linear-gradient(#788188,#353c41)!important} #systems,#contact,#packages,#process,#about{color:#20262a!important}#systems h2,#systems h3,#contact h2,#contact h3,#packages h2,#packages h3,#process h2,#process h3{color:#20262a!important}#systems p,#contact p,#packages p,#process p{color:#465057!important}.card-dark:not(.project-story-v13){background:transparent!important;color:#20262a!important}.card-dark:not(.project-story-v13) h2,.card-dark:not(.project-story-v13) h3,.card-dark:not(.project-story-v13) p{color:inherit!important}.contact-form-wrap input,.contact-form-wrap textarea{background:rgba(255,255,255,.48)!important;border-color:rgba(63,73,80,.18)!important;color:#22292e!important}.social-link{color:#30383e!important}.section-watermark{color:#283036!important}.nav-container.scrolled .nav{max-width:min(920px,calc(100vw - 28px))!important;margin-inline:auto!important}.anim{transition-duration:.88s!important}.anim.delay-200{transition-delay:.07s!important}.anim.delay-300{transition-delay:.12s!important}.anim.delay-400{transition-delay:.17s!important} @media(max-width:900px){.intro-name{align-items:flex-start;padding-top:14svh}.intro-name span{font-size:clamp(50px,14vw,92px)}.intro-portrait{top:15svh;width:min(55vw,440px);height:64svh}.intro-about{left:4vw;width:52vw}.project-panel-v13{grid-template-columns:minmax(0,1fr) minmax(250px,36vw);padding-inline:3.5vw}.project-copy-v13{padding:25px}} @media(max-width:700px){.intro-flow{height:215svh!important}.intro-sticky{min-height:610px}.intro-name{top:7svh;align-items:flex-start;padding:0 18px}.intro-name span{font-size:clamp(43px,15.6vw,74px)}.intro-portrait{top:16svh;width:74vw;height:61svh}.intro-role{bottom:3svh;width:calc(100vw - 28px);padding:14px 16px}.intro-about{left:14px;right:14px;top:auto;bottom:5svh;width:auto;padding:25px;border-radius:24px}.intro-about h2{font-size:42px}.intro-about>p{font-size:14px;line-height:1.58}.intro-services{gap:6px}.intro-services span{padding:10px 6px;font-size:8px}.project-story-v13{min-height:5000px}.project-stage-v13{min-height:600px}.project-panel-v13{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,61svh) auto;gap:0;padding:62px 14px 48px}.project-media-v13{height:57svh}.project-media-v13 img{max-height:57svh}.project-media-v13.pair{gap:7px}.project-media-v13.pair img{height:55svh}.project-copy-v13{align-self:end;margin:-34px 8px 0;padding:20px 21px;border-radius:23px}.project-copy-v13 h2{font-size:31px;margin-bottom:11px}.project-copy-v13 p{font-size:13px;line-height:1.5}.project-copy-v13>span{font-size:9px;margin-bottom:9px}.project-progress-v13{left:16px;right:16px;bottom:15px}.project-progress-v13 b{display:none}body>section:not(.project-story-v13){padding-top:52px!important;padding-bottom:52px!important}} @media(prefers-reduced-motion:reduce),(max-height:620px){.intro-flow{height:auto!important;min-height:0}.intro-sticky{position:relative;height:auto;min-height:0;padding:90px 20px 50px;display:grid;gap:20px}.intro-name,.intro-portrait,.intro-role,.intro-about{position:relative;inset:auto;transform:none!important;opacity:1!important}.intro-name{display:flex;padding:0}.intro-name span{font-size:14vw}.intro-portrait{width:min(520px,100%);height:68svh;margin:auto}.intro-role{width:min(760px,100%);margin:auto}.intro-about{width:min(720px,100%);margin:auto}.project-story-v13{height:auto!important;min-height:0}.project-stage-v13{position:relative;height:auto}.project-panel-v13{position:relative;opacity:1!important;pointer-events:auto!important;min-height:100svh}.project-progress-v13{display:none}} .project-story-v13 img{translate:none!important;scale:none!important;opacity:var(--v14-img-alpha,1)!important} :root{--v14-bg:#eef1f3;--v14-ink:#20262a;--v14-muted:#59636a;--v14-glass:rgba(249,251,252,.68);--v14-line:rgba(255,255,255,.92);--v14-shadow:0 22px 64px rgba(29,36,41,.10)} html,body{background:var(--v14-bg)!important;color:var(--v14-ink)!important}body{background-image:radial-gradient(circle at 14% 4%,rgba(255,255,255,.96),transparent 35%),radial-gradient(circle at 86% 54%,rgba(215,221,225,.52),transparent 38%),linear-gradient(145deg,#f8fafb,#e9edf0 58%,#f6f8f9)!important;background-attachment:fixed!important} body:before,body:after,.logo-strip{display:none!important}body>section,body>header{background-color:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}body>section:before,body>section:after{display:none!important}body>section:not(.project-story-v13){padding-top:clamp(56px,6vw,88px)!important;padding-bottom:clamp(56px,6vw,88px)!important} .intro-role b,.intro-role span{display:block}.intro-role b{font-size:clamp(17px,1.55vw,24px);line-height:1.2;margin-bottom:7px;letter-spacing:-.02em}.intro-role span{font-size:clamp(13px,1vw,16px);line-height:1.45;color:#515b62} .center-text h1,.center-text h2,.center-text h3,.center-text h4,section h1,section h2,section h3,section h4{color:var(--v14-ink)!important}.center-text p,section p,section li{color:#4d575e!important}.accent-text,.founder-label,.vtag,.pkg-badge,.brand-kicker{color:#59646b!important}.section-watermark{color:#283036!important;opacity:1!important}.separator,.stage-line,.story-rule{background:#8b949a!important} #skills .cap-2>div{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important}.skill-col{margin:0 0 18px!important;padding:22px 24px!important;border-radius:22px!important;background:var(--v14-glass)!important;border:1px solid var(--v14-line)!important;box-shadow:0 14px 42px rgba(29,36,41,.07)!important}.skill-col h4{color:#30383e!important}.chip{color:#465158!important;background:rgba(255,255,255,.42)!important;border-color:rgba(63,73,80,.16)!important} .study-compare{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:clamp(16px,2.6vw,38px)!important;align-items:stretch!important;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.sc-designer,.sc-budget{border-radius:26px!important;box-shadow:var(--v14-shadow)!important}.sc-designer{background:var(--v14-glass)!important;border:1px solid var(--v14-line)!important}.sc-budget{background:#293136!important;border:1px solid #293136!important}.sc-arrow{align-self:center!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#657078!important} .vtag,.vtag.curio,.vtag.anything,.vtag.pivotcrux,.pkg-badge{display:inline-flex!important;width:auto!important;background:rgba(66,76,83,.09)!important;border:1px solid rgba(66,76,83,.13)!important;color:#465159!important;box-shadow:none!important}.anything-block .cap-box,.cap-box[style*="background:var(--deep)"]{background:var(--v14-glass)!important;border:1px solid var(--v14-line)!important;box-shadow:var(--v14-shadow)!important}.anything-block .cap-box h3,.anything-block .cap-box p,.cap-box[style*="background:var(--deep)"] h3,.cap-box[style*="background:var(--deep)"] p{color:var(--v14-ink)!important}.anything-uses,.use{background:transparent!important}.use{border-color:rgba(62,72,79,.14)!important}.u-n{color:#657078!important} #brand>.center-text h2,#brand>.center-text p{color:var(--v14-ink)!important;opacity:1!important}.brandpin{border:0!important}.brand-side h3{color:#20262a!important}.brand-side p,.brand-side .brand-work{color:#4f5960!important}.bcard{border:1px solid rgba(255,255,255,.9)!important}.capicon h4,.capicon p{color:var(--v14-ink)!important}.ci-art{color:#3d474e!important}.ci-art svg{stroke:#3d474e!important} #systems{color:var(--v14-ink)!important}.vtag.curio,.vtag.pivotcrux{background:rgba(66,76,83,.09)!important;color:#465159!important}.shots .cap{color:#475159!important;background:rgba(249,251,252,.88)!important}.shot{background:transparent!important}.shot img{opacity:1!important;filter:none!important} .pkg-card,.pkg-card.pkg-standard,.pkg-card.pkg-partner,.pkg-card.pkg-vip{background:var(--v14-glass)!important;background-image:none!important;border:1px solid var(--v14-line)!important;color:var(--v14-ink)!important;box-shadow:var(--v14-shadow)!important}.pkg-card *,.pkg-card.pkg-vip *{color:var(--v14-ink)!important}.pkg-card:before,.pkg-card:after{display:none!important}.pkg-name{color:#20262a!important}.pkg-desc,.pkg-features li,.pkg-delivery{color:#4e585f!important}.pkg-cta,.pkg-card.pkg-vip .pkg-cta{background:#263036!important;color:#fff!important;border-color:#263036!important}.pkg-card.pkg-vip{transform:translateY(-10px)!important;box-shadow:0 30px 82px rgba(27,34,39,.14)!important}.pkg-card.pkg-vip .pkg-badge{background:#263036!important;color:#fff!important;border-color:#263036!important} .project-story-v13{height:820svh!important;min-height:5200px!important;background:transparent!important}.project-stage-v13{background:transparent!important}.project-panel-v13{grid-template-columns:minmax(290px,34vw) minmax(0,1fr)!important;gap:clamp(28px,5vw,90px)!important;padding:clamp(82px,10vh,126px) 6vw clamp(62px,8vh,96px)!important}.project-panel-v13:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(290px,34vw)!important}.project-panel-v13:nth-child(even) .project-media-v13{grid-column:1;grid-row:1}.project-panel-v13:nth-child(even) .project-copy-v13{grid-column:2;grid-row:1}.project-copy-v13{grid-column:1;grid-row:1;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;max-width:520px}.project-copy-v13>span{color:#626d74!important}.project-copy-v13 h2{font-size:clamp(43px,5.4vw,86px)!important;line-height:.9!important}.project-copy-v13 p{font-size:clamp(16px,1.12vw,18px)!important;line-height:1.72!important;max-width:46ch}.project-media-v13{grid-column:2;grid-row:1;height:min(68svh,720px)!important;overflow:visible!important}.project-media-v13 img{border-radius:24px!important;box-shadow:0 34px 92px rgba(27,34,39,.16)!important;background:transparent!important;object-fit:contain!important}.project-media-v13.pair{display:block!important;position:relative!important}.project-media-v13.pair img:first-child{position:absolute!important;left:0!important;top:0!important;width:76%!important;height:82%!important;z-index:2!important}.project-media-v13.pair img:nth-child(2){position:absolute!important;right:0!important;bottom:0!important;width:61%!important;height:66%!important;z-index:3!important}.project-panel-v13.boards .project-media-v13 img:first-child{width:68%!important;height:78%!important}.project-panel-v13.boards .project-media-v13 img:nth-child(2){width:58%!important;height:62%!important}.project-progress-v13{display:none!important} .contact-section{min-height:72svh!important;display:grid!important;place-items:center!important;padding-inline:24px!important}.contact-minimal{width:min(920px,100%);text-align:center}.contact-minimal h2{font-size:clamp(48px,7.5vw,112px)!important;line-height:.88!important;letter-spacing:-.06em!important;margin:16px auto 24px!important}.contact-minimal>p{font-size:clamp(16px,1.3vw,20px)!important}.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}.contact-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:23px 26px;border-radius:22px;background:var(--v14-glass);border:1px solid var(--v14-line);box-shadow:var(--v14-shadow);color:var(--v14-ink);text-decoration:none;-webkit-backdrop-filter:blur(24px) saturate(120%);backdrop-filter:blur(24px) saturate(120%);transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s}.contact-link:hover{transform:translateY(-5px);background:rgba(255,255,255,.84)}.contact-link span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#69737a}.contact-link strong{text-align:left;font-size:16px}.contact-link i{font-style:normal;font-size:22px} .v14-reveal{opacity:var(--v14-o,1)!important;transform:translate3d(0,var(--v14-y,0),0) scale(var(--v14-s,1))!important;filter:blur(var(--v14-b,0px))!important;will-change:transform,opacity,filter} @media(max-width:760px){.intro-role b{font-size:16px}.intro-role span{font-size:12px}.study-compare{grid-template-columns:1fr!important}.sc-arrow{transform:rotate(90deg)}.project-story-v13{height:760svh!important;min-height:4700px!important}.project-panel-v13,.project-panel-v13:nth-child(even){grid-template-columns:1fr!important;grid-template-rows:minmax(0,56svh) auto!important;padding:58px 16px 42px!important;gap:0!important}.project-media-v13,.project-panel-v13:nth-child(even) .project-media-v13{grid-column:1!important;grid-row:1!important;height:54svh!important}.project-copy-v13,.project-panel-v13:nth-child(even) .project-copy-v13{grid-column:1!important;grid-row:2!important;padding:18px 6px 0!important}.project-copy-v13 h2{font-size:38px!important}.project-copy-v13 p{font-size:14px!important}.project-media-v13.pair img:first-child{width:78%!important;height:78%!important}.project-media-v13.pair img:nth-child(2){width:64%!important;height:62%!important}.contact-links{grid-template-columns:1fr}.contact-link{padding:20px}.contact-link strong{font-size:14px}.pkg-card.pkg-vip{transform:none!important}} #curio .cap-2>div,#brand .cap-2>div,#projects>.cap-2>div{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:clamp(12px,2vw,24px)!important}#curio .cap-2,#brand .cap-2,#projects>.cap-2{gap:clamp(30px,6vw,90px)!important}.capicon .ci-art{background:transparent!important;border:0!important;box-shadow:none!important}.capicon h4,.capicon p{color:#273036!important}.capicon p{opacity:.72!important} .pkg-card.pkg-vip{background:#283136!important;border-color:#283136!important;color:#f7f9fa!important;box-shadow:0 34px 90px rgba(26,33,38,.2)!important}.pkg-card.pkg-vip .pkg-name,.pkg-card.pkg-vip .pkg-desc,.pkg-card.pkg-vip .pkg-features li,.pkg-card.pkg-vip .pkg-delivery,.pkg-card.pkg-vip .pkg-delivery span{color:#f7f9fa!important}.pkg-card.pkg-vip .pkg-desc,.pkg-card.pkg-vip .pkg-delivery{opacity:.72!important}.pkg-card.pkg-vip .pkg-badge{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important}.pkg-card.pkg-vip .pkg-cta{background:#f5f7f8!important;border-color:#f5f7f8!important;color:#263036!important}.pkg-features li:before,.pkg-standard .pkg-features li:before,.pkg-partner .pkg-features li:before{background:#e0e5e8!important;color:#465159!important;box-shadow:none!important}.pkg-vip .pkg-features li:before{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none!important} .intro-about{display:flex!important;flex-direction:column!important}.intro-about>p{margin:0!important}.intro-roles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:28px!important}.intro-roles>span{display:block!important;padding:14px 15px!important;border-top:1px solid rgba(63,73,80,.16)!important;font-size:14px!important;font-weight:600!important;line-height:1.25!important;color:#293136!important}.intro-roles small{display:block!important;margin-top:7px!important;font-size:11px!important;font-weight:400!important;line-height:1.4!important;color:#657078!important} #projects{overflow:visible!important}.prj-list{overflow:visible!important}.prj-list>.project-story-v13{width:100vw!important;height:760svh!important;min-height:5000px!important;margin:0 0 24px calc(50% - 50vw)!important;padding:0!important;background:transparent!important;position:relative!important}.prj-list>.project-story-v13 .project-stage-v13{position:sticky!important;top:var(--feature-top,78px)!important;width:var(--feature-width,min(1100px,90vw))!important;height:var(--feature-height,200px)!important;min-height:0!important;margin:0 auto!important;overflow:hidden!important;border-radius:var(--feature-radius,26px)!important;background:#dfe4e7!important;box-shadow:0 22px 64px rgba(29,36,41,var(--feature-shadow,.12))!important;isolation:isolate!important;transform:translateZ(0)!important;transition:none!important}.feature-cover{position:absolute;inset:0;z-index:60;overflow:hidden;opacity:var(--cover-alpha,1);pointer-events:none}.feature-cover-image{position:absolute;inset:0}.feature-cover-image img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:none!important;opacity:1!important;transform:scale(var(--cover-scale,1.02))}.feature-cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,24,28,.68),rgba(18,24,28,.14) 66%,rgba(18,24,28,.26))}.feature-cover-copy{position:absolute;z-index:2;left:clamp(24px,4vw,54px);top:50%;width:min(650px,72%);transform:translateY(-50%);color:#fff}.feature-cover-copy h3{font-size:clamp(25px,3vw,46px)!important;line-height:1!important;color:#fff!important;margin:5px 0 10px}.feature-cover-copy p{max-width:54ch;font-size:14px!important;line-height:1.45!important;color:rgba(255,255,255,.82)!important;margin:0 0 11px}.feature-cover-copy .prj-band-meta,.feature-cover-copy .prj-band-tags span{color:#fff!important}.feature-cover-index{position:absolute;z-index:3;right:clamp(24px,4vw,54px);top:50%;transform:translateY(-50%);font-family:var(--font-heading);font-size:clamp(34px,4vw,58px);color:rgba(255,255,255,.55)}.feature-open-cue{position:absolute;z-index:3;right:24px;bottom:17px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)} .prj-list>.project-story-v13 .project-panel-v13{position:absolute!important;inset:0!important;display:grid!important;grid-template-columns:minmax(280px,34vw) minmax(0,1fr)!important;gap:clamp(28px,5vw,84px)!important;align-items:center!important;padding:clamp(76px,9vh,116px) 6vw clamp(58px,7vh,90px)!important;background:transparent!important;opacity:0;pointer-events:none}.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd){grid-template-columns:minmax(0,1fr) minmax(280px,34vw)!important}.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-media-v13{grid-column:1!important}.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-copy-v13{grid-column:2!important}.prj-list>.project-story-v13 .project-copy-v13{grid-column:1!important;grid-row:1!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;max-width:520px!important}.prj-list>.project-story-v13 .project-copy-v13 h2{font-size:clamp(42px,5.2vw,82px)!important;color:#20262a!important}.prj-list>.project-story-v13 .project-copy-v13 p{font-size:clamp(15px,1.1vw,18px)!important;color:#4b565d!important}.prj-list>.project-story-v13 .project-media-v13{grid-column:2!important;grid-row:1!important;height:min(68svh,720px)!important}.prj-list>.project-story-v13 .project-media-v13 img{object-fit:contain!important;border-radius:22px!important;box-shadow:0 28px 78px rgba(27,34,39,.15)!important}.prj-list>.project-story-v13 .project-progress-v13{display:none!important}.prj-list>.prj-band{margin-top:18px!important} @media(max-width:760px){.intro-roles{grid-template-columns:1fr!important;gap:2px!important;margin-top:17px!important}.intro-roles>span{padding:10px 4px!important}.prj-list>.project-story-v13{height:520svh!important;min-height:3200px!important}.feature-cover-copy{left:22px;width:70%}.feature-cover-copy p{display:none}.feature-cover-copy h3{font-size:26px!important}.feature-cover-index{right:20px}.prj-list>.project-story-v13 .project-panel-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd){grid-template-columns:1fr!important;grid-template-rows:minmax(0,56svh) auto!important;padding:56px 16px 42px!important;gap:0!important}.prj-list>.project-story-v13 .project-media-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-media-v13{grid-column:1!important;grid-row:1!important;height:54svh!important}.prj-list>.project-story-v13 .project-copy-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-copy-v13{grid-column:1!important;grid-row:2!important;padding:16px 5px 0!important}.prj-list>.project-story-v13 .project-copy-v13 h2{font-size:37px!important}.prj-list>.project-story-v13 .project-copy-v13 p{font-size:14px!important}} @media(prefers-reduced-motion:reduce){.prj-list>.project-story-v13{height:auto!important;min-height:0!important;width:100%!important;margin:0 0 22px!important}.prj-list>.project-story-v13 .project-stage-v13{position:relative!important;top:auto!important;width:100%!important;height:200px!important;border-radius:26px!important}.feature-cover{opacity:1!important}.project-panel-v13{display:none!important}} html,body{background:#edf0f2!important}body>section,body>header{border-top:0!important;border-bottom:0!important;outline:0!important}.separator,.stage-line,.story-rule,hr,.section-divider,[class*="divider"],[class*="separator"]{display:none!important}.footer-section{border-top:0!important} #brand>.cap-2,#projects>.cap-2{display:none!important}.pkg-card.pkg-vip .pkg-desc{color:rgba(248,250,251,.82)!important;opacity:1!important}.pkg-card.pkg-vip .pkg-features li{color:#f7f9fa!important}.pkg-card.pkg-vip .pkg-delivery,.pkg-card.pkg-vip .pkg-delivery span{color:rgba(248,250,251,.78)!important} .roi-card,.study-step,.pkg-card,.skill-col,.app-card,.fab-card,.contact-link,.sr-item,.cap-box,.testi-card,.project-copy-v13{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.25) 55%,rgba(225,232,236,.32))!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(255,255,255,.3),0 20px 58px rgba(31,39,44,.11)!important;-webkit-backdrop-filter:blur(30px) saturate(155%)!important;backdrop-filter:blur(30px) saturate(155%)!important}.pkg-card.pkg-vip{background:linear-gradient(145deg,rgba(35,44,49,.97),rgba(48,58,64,.92))!important;border-color:rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.05),0 30px 80px rgba(26,33,38,.2)!important}.roi-card h3,.study-step h3,.skill-col h4,.app-card h3,.fab-card h3,.cap-box h3{color:#222a2f!important}.roi-card p,.study-step p,.skill-col p,.app-card p,.fab-card p,.cap-box p{color:#4c575e!important} #brand .bcard{overflow:visible!important;isolation:isolate!important;box-shadow:0 34px 90px rgba(26,33,38,.2)!important}#brand .bcard:before{content:""!important;display:block!important;position:absolute!important;z-index:-2!important;inset:12%!important;border-radius:38%!important;background:var(--brand-glow,#7c858b)!important;opacity:.42!important;filter:blur(34px)!important;transform:translateZ(-1px) scale(1.08)!important}#brand .bcard .blogo{position:relative!important;z-index:1!important;overflow:hidden!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 18px 48px rgba(24,31,36,.18)!important} .prj-list>.project-story-v13{height:900svh!important;min-height:6000px!important}.prj-list>.project-story-v13 .project-stage-v13{background:linear-gradient(145deg,#f4f7f8,#e1e7ea)!important}.prj-list>.project-story-v13 .project-panel-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd){grid-template-columns:minmax(0,1.65fr) minmax(310px,.8fr)!important;gap:clamp(28px,4vw,68px)!important;padding:clamp(74px,9vh,112px) 5.5vw clamp(56px,7vh,86px)!important}.prj-list>.project-story-v13 .project-media-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-media-v13{grid-column:1!important;grid-row:1!important;position:relative!important;width:100%!important;height:min(72svh,760px)!important;display:block!important;overflow:hidden!important;border-radius:26px!important;background:rgba(255,255,255,.24)!important;box-shadow:0 30px 88px rgba(27,34,39,.14)!important}.prj-list>.project-story-v13 .project-media-v13 img,.prj-list>.project-story-v13 .project-media-v13.pair img:first-child,.prj-list>.project-story-v13 .project-media-v13.pair img:nth-child(2){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;opacity:var(--beat-alpha,0)!important;transform:translate3d(0,var(--beat-y,0),0) scale(var(--beat-scale,1))!important}.prj-list>.project-story-v13 .project-copy-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-copy-v13{grid-column:2!important;grid-row:1!important;align-self:center!important;max-width:440px!important;padding:clamp(25px,3vw,42px)!important;border-radius:28px!important;color:#222a2f!important}.prj-list>.project-story-v13 .project-copy-v13 h2{font-size:clamp(38px,4.2vw,68px)!important;line-height:.94!important}.prj-list>.project-story-v13 .project-copy-v13 p{font-size:clamp(15px,1.05vw,17px)!important;line-height:1.7!important}.feature-beat-counter{position:absolute;z-index:65;left:calc(5.5vw + 18px);bottom:24px;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.25));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 12px 35px rgba(29,36,41,.1);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);font-size:10px;letter-spacing:.16em;color:#4c575e;opacity:var(--beat-counter-alpha,0)} @media(max-width:760px){.prj-list>.project-story-v13{height:850svh!important;min-height:5200px!important}.prj-list>.project-story-v13 .project-panel-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd){grid-template-columns:1fr!important;grid-template-rows:minmax(0,57svh) auto!important;padding:54px 14px 38px!important;gap:0!important}.prj-list>.project-story-v13 .project-media-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-media-v13{grid-column:1!important;grid-row:1!important;height:55svh!important;border-radius:20px!important}.prj-list>.project-story-v13 .project-copy-v13,.prj-list>.project-story-v13 .project-panel-v13:nth-child(odd) .project-copy-v13{grid-column:1!important;grid-row:2!important;margin:-22px 10px 0!important;padding:20px 21px!important;border-radius:22px!important;z-index:5!important}.prj-list>.project-story-v13 .project-copy-v13 h2{font-size:32px!important}.feature-beat-counter{left:20px;bottom:13px}} html,body{background:#edf0f2!important} .intro-progress,.scroll-progress,.sec-rule,.section-divider,.stage-line,.story-rule,hr{display:none!important} body>header,body>section,#skills,#projects,#skills+section,#projects+section{border:0!important;border-top:0!important;border-bottom:0!important;outline:0!important;background-color:transparent!important;background-image:none!important} body>header::before,body>header::after,body>section::before,body>section::after,#skills::before,#skills::after,#projects::before,#projects::after{display:none!important;content:none!important} #packages .pkg-card.pkg-vip,#packages .pkg-vip{color:#f7f9fa!important;-webkit-text-fill-color:currentColor!important} #packages .pkg-card.pkg-vip .pkg-desc,#packages .pkg-card.pkg-vip p,#packages .pkg-card.pkg-vip li,#packages .pkg-card.pkg-vip .pkg-delivery,#packages .pkg-card.pkg-vip .pkg-delivery span{color:#f7f9fa!important;-webkit-text-fill-color:#f7f9fa!important;opacity:.94!important} #packages .pkg-card.pkg-vip .pkg-name,#packages .pkg-card.pkg-vip .pkg-price,#packages .pkg-card.pkg-vip h3{color:#fff!important;-webkit-text-fill-color:#fff!important} #projects .prj-list>.project-story-v13{display:block!important;visibility:visible!important;opacity:1!important;overflow:visible!important} #projects .prj-list>.project-story-v13 .project-stage-v13{display:block!important;visibility:visible!important;opacity:1!important;z-index:20!important} #projects .feature-cover{display:block!important;visibility:visible!important} #projects .feature-cover-image img{display:block!important;visibility:visible!important;opacity:1!important}