/* ========== ACCESSIBILITY ========== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ========== TOKENS ========== */ :root { --csh-gold:#A16207; --csh-gold-lt:#d4ad72; --csh-gold-pale:#f0ddb0; --csh-charcoal:#1C1917; --csh-ink:#0C0A09; --csh-surface:#44403C; --csh-ivory:#FAFAF9; --csh-sand:#e8e0d3; --csh-sand-mid:#c9bfaf; --csh-border:#D6D3D1; --csh-muted:#64748B; --csh-text-dim:#4a4640; --font-display:'Cormorant Garamond', Georgia, serif; --font-body:'Montserrat', system-ui, -apple-system, sans-serif; --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-gold: cubic-bezier(0.25, 0.46, 0.45, 0.94); --grad-gold-rule: linear-gradient(90deg, #A16207, #d4ad72); --grad-radial-dark: radial-gradient(ellipse 70% 60% at 5% 5%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 50% 70% at 95% 95%, rgba(212,173,114,0.04) 0%, transparent 65%), #1C1917; --grad-radial-light: radial-gradient(ellipse 60% 50% at 10% 0%, rgba(161,98,7,0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 90% 100%, rgba(161,98,7,0.05) 0%, transparent 70%); --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* ========== BASE ========== */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden; margin: 0; padding: 0; } body { font-family: var(--font-body); font-weight: 300; color: var(--csh-ink); background: var(--csh-ivory); cursor: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (pointer: coarse) { body { cursor: auto; } #csh-cursor-dot, #csh-cursor-ring { display:none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .csh-reveal { opacity:1 !important; transform:none !important; } body { cursor: auto; } #csh-cursor-dot, #csh-cursor-ring { display:none !important; } } h1, h2, h3 { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.03em; line-height: 1.12; color: var(--csh-charcoal); margin: 0; } p { margin: 0; } a { color: inherit; } img { display: block; max-width: 100%; } /* ========== CURSOR ========== */ #csh-cursor-dot, #csh-cursor-ring { position: fixed; left:0; top:0; pointer-events:none; transform: translate(-50%,-50%); } #csh-cursor-dot { z-index:9999; width:6px; height:6px; border-radius:50%; background:var(--csh-gold); transition: width .2s, height .2s, background .2s; } #csh-cursor-ring { z-index:9998; width:36px; height:36px; border-radius:50%; border:1px solid rgba(161,98,7,0.45); transition: width .35s var(--ease-spring), height .35s var(--ease-spring), border-color .2s, opacity .2s; } body.c-hover #csh-cursor-dot { width:10px; height:10px; background: var(--csh-gold-lt); } body.c-hover #csh-cursor-ring { width:54px; height:54px; border-color: rgba(212,173,114,0.35); } body.c-click #csh-cursor-dot { width:4px; height:4px; } body.c-click #csh-cursor-ring { width:22px; height:22px; } /* ========== GRAIN + SURFACES ========== */ .csh-grain { position: relative; } .csh-grain::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image: var(--grain-svg); background-repeat: repeat; mix-blend-mode: overlay; } .csh-radial-dark { background: var(--grad-radial-dark); } .csh-radial-light { background: var(--grad-radial-light); } /* ========== IMAGE TREATMENT ========== */ .csh-img-wrap { position: relative; overflow: hidden; } .csh-img-wrap::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(161,98,7,0.07); mix-blend-mode: multiply; } .csh-img-wrap > img { width:100%; height:100%; object-fit: cover; display:block; transition: transform .82s var(--ease-gold); } /* ========== EYEBROW + RULE ========== */ .csh-eyebrow { display:inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.58rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--csh-gold); } .csh-eyebrow.on-dark { color: var(--csh-gold-lt); } .csh-rule { display: block; width: 44px; height: 1px; background: var(--grad-gold-rule); border: 0; margin: 32px 0; } .csh-rule.center { margin-left:auto; margin-right:auto; } em.gold { font-style: italic; color: var(--csh-gold); font-weight: inherit; } em.gold.on-dark { color: var(--csh-gold-lt); } /* ========== BUTTON WIPE ========== */ .btn-wipe { position: relative; overflow: hidden; cursor: none; display: inline-block; text-decoration: none; font-family: var(--font-body); font-weight: 600; } .btn-wipe::before { content:''; position:absolute; inset:0; background: var(--csh-gold); transform: translateX(-101%); transition: transform .42s var(--ease-gold); z-index:0; } .btn-wipe:hover::before { transform: translateX(0); } .btn-wipe > span { position: relative; z-index: 1; transition: color .38s ease; display:inline-flex; align-items:center; gap:12px; } .btn-wipe:hover > span { color: var(--csh-ink); } .btn-wipe:active { opacity:.85; transform: scale(.99); } .btn-wipe:focus-visible { outline: 2px solid var(--csh-gold-lt); outline-offset: 3px; } .btn-hero { border: 1px solid var(--csh-gold); color: var(--csh-gold-lt); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 40px; } .btn-dark { border: 1px solid var(--csh-charcoal); background: var(--csh-charcoal); color: var(--csh-ivory); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 32px; } .btn-nav { border: 1px solid var(--csh-gold); color: var(--csh-gold-lt); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 9.6px 20px; text-align: center; } .btn-nav > span { justify-content: center; width: 100%; text-align: center; } /* ========== REVEAL ========== */ .csh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-spring), transform .9s var(--ease-spring); } .csh-reveal.visible { opacity: 1; transform: translateY(0); } .csh-delay-1 { transition-delay: .1s; } .csh-delay-2 { transition-delay: .22s; } .csh-delay-3 { transition-delay: .34s; } .csh-delay-4 { transition-delay: .46s; } .csh-delay-5 { transition-delay: .58s; } /* ========== NAV ========== */ .csh-nav { position: fixed; top:0; left:0; right:0; z-index: 100; display:flex; justify-content: space-between; align-items: center; padding: 28px 64px; transition: background .5s ease, padding .4s ease, border-color .5s ease; } .csh-nav.scrolled { background: rgba(10,10,9,0.86); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(161,98,7,0.1); padding-top: 18px; padding-bottom: 18px; } .csh-nav-brand { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.05em; color: var(--csh-ivory); text-decoration: none; cursor: none; } .csh-nav-brand em { color: var(--csh-gold-lt); font-style: normal; } .csh-nav-list { display:flex; gap: 40px; list-style:none; margin:0; padding:0; align-items:center; } .csh-nav-lnk { position: relative; color: rgba(245,242,237,0.7); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration:none; cursor:none; transition: color .2s; } .csh-nav-lnk::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px; background: var(--csh-gold-lt); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-gold); } .csh-nav-lnk:hover { color: var(--csh-gold-lt); } .csh-nav-lnk:hover::after { transform: scaleX(1); } .hbr { display:none; flex-direction: column; gap: 5px; background: transparent; border: 0; padding: 4px; cursor: none; } .hbr span { display:block; width:24px; height: 1.5px; background: var(--csh-ivory); transition: transform .4s var(--ease-spring), opacity .3s, width .3s; transform-origin: center; } .hbr.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hbr.open span:nth-child(2) { opacity: 0; width: 0; } .hbr.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .mob-menu { position: fixed; inset: 0; z-index: 105; display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 36px; background: rgba(10,10,9,0.97); backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-spring); } .mob-menu.open { opacity: 1; pointer-events: all; } .mob-menu a { font-family: var(--font-display); color: var(--csh-ivory); font-size: 3rem; font-weight: 300; letter-spacing: -0.03em; text-decoration:none; } .mob-close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(161,98,7,0.4); color: var(--csh-ivory); cursor: pointer; padding: 0; transition: border-color .25s, color .25s, background .25s; } .mob-close:hover { border-color: var(--csh-gold-lt); color: var(--csh-gold-lt); background: rgba(161,98,7,0.08); } .mob-close:focus-visible { outline: 2px solid var(--csh-gold-lt); outline-offset: 3px; } @media (max-width: 900px) { .csh-nav { padding: 24px; } .csh-nav-list { display:none; } .hbr { display: flex; } } /* ========== HERO ========== */ .hero { position: relative; height: 100vh; min-height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #1C1917; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay-1 { position:absolute; inset:0; z-index:5; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55) 100%); } .hero-overlay-2 { position:absolute; inset:0; z-index:6; pointer-events:none; background: rgba(161,98,7,0.04); mix-blend-mode: multiply; } .hero-frame { position: relative; z-index: 20; text-align: center; color: var(--csh-ivory); max-width: 920px; padding: 0 24px; } .hero-eyebrow { color: #d4ad72; font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 600; margin-bottom: 28px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); animation: fadeUp 1.4s var(--ease-spring) 0.1s both; } .hero h1 { font-family: var(--font-display); font-weight: 300; line-height: 1.04; margin-bottom: 24px; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.03em; color: var(--csh-ivory); animation: fadeUp 1.4s var(--ease-spring) 0.22s both; text-shadow: 0 4px 40px rgba(0,0,0,0.5); } .hero h1 em { font-style: italic; color: var(--csh-gold-lt); font-weight: inherit; } .hero-meta { color: rgba(245,242,237,0.78); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 40px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); animation: fadeUp 1.4s var(--ease-spring) 0.34s both; } .hero-meta .dot { margin: 0 12px; color: rgba(161,98,7,0.7); } .hero-cta { animation: fadeUp 1.4s var(--ease-spring) 0.46s both; } .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 20; display:flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .hero-scroll span { color: rgba(245,242,237,0.4); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; } .hero-scroll .line { width: 1px; height: 56px; background: linear-gradient(to bottom, var(--csh-gold), transparent); animation: scrollPulse 2.4s ease-in-out infinite; } @keyframes fadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollPulse { 0%,100% { opacity: .55; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.12); } } /* ========== STATS ========== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; background: radial-gradient(ellipse 70% 60% at 5% 100%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 70% 60% at 5% 5%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 50% 70% at 95% 95%, rgba(212,173,114,0.04) 0%, transparent 65%), #1C1917; } .stats.csh-radial-dark { background: radial-gradient(ellipse 70% 60% at 5% 100%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 70% 60% at 5% 5%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 50% 70% at 95% 95%, rgba(212,173,114,0.04) 0%, transparent 65%), #1C1917; } .csh-stat { position: relative; text-align: center; padding: 80px 24px; border-right: 1px solid rgba(161,98,7,0.08); } .csh-stat:last-child { border-right: 0; } .csh-stat-num { font-family: var(--font-display); font-weight: 300; color: var(--csh-gold-lt); display: block; line-height: 1; margin-bottom: 16px; font-size: clamp(3.4rem, 7vw, 5.6rem); } .csh-stat-num::after { display: none; } .csh-stat-lbl { display: block; color: rgba(245,242,237,0.55); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; } @media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } .csh-stat:nth-child(2) { border-right: 0; } } /* ========== PROJECTS ========== */ .projects { padding-top: 112px; } .section-head { padding: 0 64px; margin-bottom: 64px; } .section-head h2 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin: 0; color: var(--csh-ivory); } .section-head.light h2 { color: var(--csh-charcoal); } .section-head.center { text-align: center; max-width: 560px; margin-left:auto; margin-right:auto; padding: 0 24px 0; margin-bottom: 64px; } .section-head.center .csh-rule { margin-left:auto; margin-right:auto; } .proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px 24px; } .proj-card { position: relative; overflow: hidden; cursor: none; outline: none; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5); transition: box-shadow .5s var(--ease-spring), transform .5s var(--ease-spring); min-height: 380px; } .proj-tall { grid-row: span 2; min-height: 763px; } .proj-card::after { content:''; position:absolute; inset:14px; z-index:25; border: 1px solid rgba(161,98,7,0); pointer-events:none; transition: border-color .5s var(--ease-spring); } .proj-card:hover { box-shadow: 0 36px 80px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(161,98,7,0.25); transform: translateY(-4px); } .proj-card:hover::after { border-color: rgba(161,98,7,0.35); } .proj-card .csh-img-wrap { position: absolute; inset: 0; } .proj-card img { transition: transform .95s var(--ease-gold); } .proj-card:hover img { transform: scale(1.06); } .proj-card .overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.86) 0%, transparent 52%); } .proj-card .copy { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; padding: 40px; color: var(--csh-ivory); } .proj-loc { color: var(--csh-gold-lt); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; } .proj-title { font-family: var(--font-display); font-weight: 300; font-size: 1.65rem; line-height: 1.2; margin: 0 0 8px; color: var(--csh-ivory); } .proj-tall .proj-title { font-size: 1.75rem; } .proj-desc { max-height: 0; overflow: hidden; color: transparent; transition: max-height .52s var(--ease-spring), color .4s ease; font-size: 0.7rem; line-height: 1.6; font-weight: 300; margin: 0; } .proj-card:hover .proj-desc { max-height: 120px; color: rgba(245,242,237,0.72); } .proj-arrow { display: none !important; } @media (max-width: 900px) { .proj-grid { grid-template-columns: 1fr; } .proj-tall { grid-row: auto; min-height: 460px; } .section-head { padding: 0 24px; } } /* ========== ABOUT ========== */ .about { display: grid; grid-template-columns: 1fr 1fr; position: relative; background: var(--csh-sand); } .about-img-wrap { padding: 0; height: 100%; } .about-img-wrap .csh-img-wrap { min-height: 600px; height: 100%; } .about-img-wrap .csh-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-img-wrap .csh-img-wrap::after { display: none; } .about-img-wrap img { transform: translateZ(0); backface-visibility: hidden; } .about-panel { background: var(--csh-ivory); padding: 96px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; } .about-panel h2 { font-size: clamp(2rem, 4vw, 3.4rem); } .about-panel p { color: var(--csh-text-dim); font-size: 0.87rem; line-height: 1.95; font-weight: 300; margin: 0; } .about-panel p + p { margin-top: 16px; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; } .about-stat-num { font-family: var(--font-display); font-weight: 300; color: var(--csh-gold); font-size: 2.8rem; line-height: 1; margin-bottom: 8px; } .about-stat-lbl { color: var(--csh-muted); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; } @media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about-img-wrap { padding: 48px 24px 0; } .about-panel { padding: 64px 24px; } } /* ========== BRAND STATEMENT ========== */ .brand-statement { position: relative; background: #1C1917; padding: 260px 64px 160px; text-align: center; overflow: hidden; } .brand-statement p { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--csh-ivory); font-size: clamp(2.25rem, 5.4vw, 4.75rem); letter-spacing: -0.02em; line-height: 1.18; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } .brand-statement span { color: var(--csh-gold-lt); } @media (max-width: 700px) { .brand-statement { padding: 120px 24px; } } /* ========== SERVICES ========== */ .services { background: var(--csh-ivory); padding-top: 112px; } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 24px; } .svc-card { position: relative; overflow: hidden; cursor: none; height: 560px; box-shadow: 0 20px 50px -16px rgba(0,0,0,0.45); transition: box-shadow .5s var(--ease-spring), transform .5s var(--ease-spring); } .svc-card:hover { box-shadow: 0 30px 70px -10px rgba(0,0,0,0.65), 0 0 0 1px rgba(161,98,7,0.3); transform: translateY(-6px); } .svc-card::before { content:''; position:absolute; inset:18px; z-index:25; pointer-events:none; border: 1px solid rgba(161,98,7,0); transition: border-color .55s var(--ease-spring); } .svc-card:hover::before { border-color: rgba(161,98,7,0.4); } .svc-card .csh-img-wrap { position: absolute; inset: 0; } .svc-card img { transition: transform .82s var(--ease-gold); } .svc-card:hover img { transform: scale(1.07); } .svc-card .overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.06) 60%); } .svc-card .copy { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: var(--csh-ivory); } .svc-num { font-family: var(--font-display); font-size: 3rem; font-weight: 300; line-height: 1; margin-bottom: 16px; color: rgba(161,98,7,0.28); } .svc-line { width: 0; height: 1px; background: var(--csh-gold); margin-bottom: 16px; transition: width .5s var(--ease-gold); } .svc-card:hover .svc-line { width: 44px; } .svc-title { font-family: var(--font-display); font-weight: 300; font-size: 1.85rem; color: var(--csh-ivory); line-height: 1.2; margin: 0 0 8px; } .svc-text { max-height: 0; overflow: hidden; color: transparent; transition: max-height .55s var(--ease-spring), color .4s ease .05s; font-size: 0.72rem; line-height: 1.75; font-weight: 300; margin: 0; } .svc-card:hover .svc-text { max-height: 160px; color: rgba(245,242,237,0.7); } @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } } /* ========== GALLERY ========== */ .gal-section { background: radial-gradient(ellipse 70% 60% at 5% 100%, rgba(161,98,7,0.06) 0%, transparent 65%), #1C1917; padding: 96px 0; } .gal-strip { display: flex; overflow: hidden; height: clamp(420px, 60vw, 760px); margin: 0 auto; max-width: 1600px; } button.gal-item { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; text-align: left; } .gal-item { flex: 1; overflow: hidden; position: relative; cursor: pointer; transition: flex .65s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: flex-grow; transform: translateZ(0); outline: none; } .gal-item:focus-visible { box-shadow: inset 0 0 0 2px var(--csh-gold-lt); } .gal-item.active { flex: 2.6; } .gal-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.85); transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter .5s ease; will-change: transform, filter; transform: translateZ(0) scale(1); } .gal-item.active img { transform: translateZ(0) scale(1.04); filter: brightness(0.95) saturate(1.02); } @media (hover: hover) { .gal-item:hover img { filter: brightness(0.78) saturate(0.95); } } .gal-lbl { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 16px 24px; color: var(--csh-ivory); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; transform: translateY(5px); transition: opacity .38s, transform .38s var(--ease-spring); } .gal-item.active .gal-lbl { opacity: 1; transform: translateY(0); } .gal-item::after { content:''; position:absolute; inset:0; z-index: 10; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); } /* + cue badge on each item */ .gal-cue { position: absolute; top: 16px; right: 16px; z-index: 21; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(245,242,237,0.55); color: var(--csh-ivory); background: rgba(10,10,9,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .42s var(--ease-spring), border-color .3s, background .3s, opacity .3s; pointer-events: none; } .gal-cue::before, .gal-cue::after { content:''; position: absolute; background: currentColor; transition: transform .42s var(--ease-spring); } .gal-cue::before { width: 12px; height: 1px; } .gal-cue::after { width: 1px; height: 12px; } .gal-item.active .gal-cue { border-color: var(--csh-gold-lt); color: var(--csh-gold-lt); background: rgba(28,25,23,0.55); transform: rotate(45deg); } .gal-item:hover .gal-cue { border-color: var(--csh-gold-lt); } /* tap hint under gallery */ .gal-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; color: rgba(245,242,237,0.55); font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; } .gal-hint .ln { width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(161,98,7,0.5), transparent); } .gal-hint .ic { display: inline-flex; width: 22px; height: 22px; border: 1px solid rgba(161,98,7,0.45); align-items: center; justify-content: center; color: var(--csh-gold-lt); } .gal-hint .ic svg { width: 11px; height: 11px; } /* ========== PROCESS ========== */ .process { padding: 112px 64px; position: relative; } .process .section-head { text-align: center; margin-bottom: 80px; padding: 0; } .process .section-head h2 { font-size: clamp(2rem, 4.5vw, 3.8rem); } .process .section-head .csh-rule { margin-left:auto; margin-right:auto; } .proc-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 56px; } .proc-line { position: absolute; top: 44px; left: 10%; right: 10%; height: 1px; background: rgba(161,98,7,0.12); overflow: hidden; } .proc-fill { height: 1px; width: 0; background: var(--grad-gold-rule); transition: width 1.9s var(--ease-gold); } .proc-step { text-align: center; position: relative; z-index: 2; } .step-circle { width: 80px; height: 80px; border: 1px solid rgba(161,98,7,0.3); border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 32px; font-family: var(--font-display); font-size: 1.25rem; color: rgba(161,98,7,0.5); background: var(--csh-charcoal); position: relative; z-index: 2; transition: border-color .38s, color .38s, background .38s, box-shadow .38s; } .proc-step:hover .step-circle { border-color: var(--csh-gold); color: var(--csh-gold); background: rgba(161,98,7,0.07); box-shadow: 0 0 0 1px rgba(161,98,7,0.35), 0 4px 20px rgba(161,98,7,0.15); } .step-title { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: rgba(245,242,237,0.85); margin: 0 0 8px; transition: color .3s; } .proc-step:hover .step-title { color: var(--csh-gold-lt); } .step-desc { font-size: 0.68rem; line-height: 1.75; font-weight: 300; color: rgba(245,242,237,0.38); max-width: 180px; margin: 0 auto; } @media (max-width: 900px) { .process { padding: 80px 24px; } .proc-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .proc-line { display: none; } } /* ========== TESTIMONIALS (redesigned) ========== */ .testimonials { position: relative; overflow: hidden; padding: 96px 0; background: radial-gradient(ellipse 70% 60% at 5% 100%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 70% 60% at 5% 5%, rgba(161,98,7,0.06) 0%, transparent 65%), radial-gradient(ellipse 50% 70% at 95% 95%, rgba(212,173,114,0.04) 0%, transparent 65%), #1C1917; } .testimonials .t-head-left h2{ color: var(--csh-ivory); } .testimonials .csh-eyebrow{ color: var(--csh-gold-lt); } .testimonials .t-subtitle{ color: rgba(245,242,237,0.55); } .testimonials::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0.95; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23A16207' stroke-width='1'%3E%3Cg stroke-opacity='0.13'%3E%3Cpath d='M-200,-100 Q200,80 400,180 T800,420 T1200,640 T1600,860'/%3E%3Cpath d='M-200,-40 Q220,140 420,240 T820,480 T1220,700 T1600,920'/%3E%3Cpath d='M-200,20 Q240,200 440,300 T840,540 T1240,760 T1620,980'/%3E%3Cpath d='M-160,80 Q260,260 460,360 T860,600 T1260,820 T1640,1040'/%3E%3Cpath d='M-120,150 Q280,330 480,430 T880,670 T1280,890 T1660,1110'/%3E%3Cpath d='M-80,230 Q300,400 500,500 T900,740 T1300,960 T1680,1180'/%3E%3Cpath d='M-40,320 Q320,470 520,570 T920,810 T1320,1030 T1700,1240'/%3E%3Cpath d='M0,420 Q340,540 540,640 T940,880 T1340,1100 T1720,1300'/%3E%3Cpath d='M60,520 Q360,610 560,710 T960,950 T1360,1170 T1740,1360'/%3E%3Cpath d='M120,620 Q380,680 580,780 T980,1020 T1380,1240 T1760,1420'/%3E%3C/g%3E%3Cg stroke-opacity='0.1'%3E%3Cpath d='M-220,-60 Q210,90 410,200 T810,440 T1210,660 T1610,880'/%3E%3Cpath d='M-180,40 Q250,220 450,320 T850,560 T1250,780 T1630,1000'/%3E%3Cpath d='M-100,180 Q290,340 490,440 T890,680 T1290,900 T1670,1120'/%3E%3Cpath d='M0,360 Q330,500 530,600 T930,840 T1330,1060 T1710,1280'/%3E%3Cpath d='M100,560 Q370,650 570,750 T970,990 T1370,1210 T1750,1390'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; } .t-header { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; max-width: 1320px; margin: 0 auto 56px; padding: 0 64px; } .t-head-left h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin: 14px 0 0; } .t-subtitle { color: var(--csh-text-dim); font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; line-height: 1.7; max-width: 480px; margin: 20px 0 0; } .t-nav { display: flex; gap: 10px; } .t-arrow { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--csh-ivory); border: 1px solid var(--csh-gold); color: var(--csh-gold); cursor: pointer; padding: 0; transition: background .3s, color .3s, transform .3s var(--ease-spring), box-shadow .3s; } .t-arrow:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(161,98,7,0.4); } .t-arrow:focus-visible { outline: 2px solid var(--csh-gold-lt); outline-offset: 3px; } .t-arrow svg { width: 18px; height: 18px; } .t-arrow:hover, .t-arrow:active, .t-arrow.t-arrow-on { background: var(--csh-gold); color: var(--csh-ivory); border-color: var(--csh-gold); } .t-viewport { position: relative; z-index: 2; margin: 0 auto; padding: 0; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .t-viewport::-webkit-scrollbar { display: none; } .t-track { display: flex; gap: 28px; padding: 16px 64px; } .t-card2 { flex: 0 0 420px; min-width: 420px; scroll-snap-align: start; position: relative; background: var(--csh-ivory); padding: 32px 30px 28px; border-radius: 20px; box-shadow: 0 2px 6px rgba(28,25,23,0.06), 0 18px 48px -14px rgba(28,25,23,0.18); transition: transform .42s var(--ease-spring), box-shadow .42s var(--ease-spring); display: flex; flex-direction: column; gap: 16px; min-height: 360px; } .t-card2:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(161,98,7,0.1), 0 28px 64px -12px rgba(28,25,23,0.3); } .t-top { display: flex; justify-content: space-between; align-items: flex-start; } .t-bigquote { font-family: var(--font-display); color: var(--csh-gold); font-size: 3.4rem; line-height: 0.7; opacity: 0.55; } .t-stars { color: var(--csh-gold); font-size: 0.95rem; letter-spacing: 0.18em; } .t-card2 .t-body { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--csh-charcoal); line-height: 1.7; font-size: 0.98rem; margin: 0; flex: 1; } .t-foot { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(28,25,23,0.08); } .t-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--csh-sand); border: 1px solid var(--csh-gold); font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--csh-gold); } .t-name { font-family: var(--font-display); font-weight: 500; color: var(--csh-charcoal); font-size: 1.02rem; margin: 0; letter-spacing: 0; } .t-role { color: var(--csh-muted); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin: 4px 0 0; } .t-dots { display: none; gap: 8px; justify-content: center; margin-top: 36px; padding: 0 20px; position: relative; z-index: 2; } .t-dot { width: 9px; height: 9px; border-radius: 50%; padding: 0; background: rgba(161,98,7,0.28); border: 0; cursor: pointer; transition: background .3s, width .3s, border-radius .3s; } .t-dot.active { background: var(--csh-gold); width: 28px; border-radius: 6px; } .t-dot:focus-visible { outline: 2px solid var(--csh-gold-lt); outline-offset: 3px; } @media (max-width: 1100px) { .t-header { padding: 0 32px; } .t-viewport { padding: 0 32px; } } @media (max-width: 900px) { .testimonials { padding: 72px 0; } .t-header { padding: 0 20px; margin-bottom: 36px; } .t-viewport { padding: 0; -webkit-mask-image: none; mask-image: none; } .t-track { padding: 8px 20px; gap: 16px; } .t-card2 { flex: 0 0 calc(100% - 40px); min-width: calc(100% - 40px); padding: 28px 22px 24px; min-height: 320px; border-radius: 18px; } .t-dots { display: flex; } .t-arrow { width: 46px; height: 46px; } } @media (max-width: 540px) { .t-header { grid-template-columns: 1fr; align-items: start; gap: 24px; } .t-nav { justify-content: flex-start; } .t-head-left h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); } } /* ========== CONTACT (full-bleed map + dark form, redesigned) ========== */ .contact-v2 { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; background: var(--csh-charcoal); position: relative; overflow: hidden; } /* Full-bleed map background */ .contact-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a0908; } .contact-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; filter: grayscale(1) brightness(0.32) contrast(1.7) saturate(0); } .contact-bg-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(28,25,23,0) 0%, rgba(28,25,23,0) 28%, rgba(28,25,23,0.55) 48%, rgba(28,25,23,0.92) 65%, var(--csh-charcoal) 80%, var(--csh-charcoal) 100%); } /* Pin marker — sits on the actual map at the geographic point (25% from left) */ /* Pin tip is at exactly the geographic point of the lat/lng (25.1% from left, 54.4% from top — the centroid of the OSM bbox where the original marker sat) */ /* Pin anchored at the actual geographic point of the OSM bbox (25.1% × 54.3%). Lives inside .contact-bg so it always tracks the map. */ .map-pin-marker { position: absolute; left: 25.1%; top: 54.3%; transform: translate(-50%, -100%); z-index: 3; width: 44px; height: 60px; color: var(--csh-gold); pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.6)); animation: pinDrop 0.7s var(--ease-spring) both; } .map-pin-marker svg { width: 100%; height: 100%; } @keyframes pinDrop { 0% { transform: translate(-50%, -180%); opacity: 0; } 60% { transform: translate(-50%, -90%); opacity: 1; } 100% { transform: translate(-50%, -100%); opacity: 1; } } /* Card — anchored at the same geographic point, sitting to the right of the pin, vertically centered with pin tip. Lives inside .contact-bg. */ .map-pin-card { position: absolute; left: calc(25.1% + 42px); top: 54.3%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; padding: 18px 24px; background: var(--csh-ivory); border-radius: 8px; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6), 0 8px 18px -6px rgba(0,0,0,0.5); max-width: 320px; min-width: 240px; text-decoration: none; transition: transform .35s var(--ease-spring), box-shadow .35s; cursor: pointer; pointer-events: auto; } .map-pin-card:hover { transform: translateY(-54%); box-shadow: 0 32px 64px -16px rgba(0,0,0,0.7); } .map-pin-body { display: flex; flex-direction: column; gap: 8px; } .map-pin-addr { color: var(--csh-gold); font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(161,98,7,0.4); } .map-pin-line { display: inline-flex; align-items: center; gap: 8px; color: var(--csh-charcoal); font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; margin: 0; } .map-pin-line svg { width: 14px; height: 14px; stroke: var(--csh-gold); flex-shrink: 0; } /* Form column */ .contact-form-wrap { grid-column: 2; background: transparent; padding: 88px 72px; display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 2; } .contact-form-wrap::before { content:''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 95% 5%, rgba(161,98,7,0.08), transparent 70%); } .contact-pre { color: rgba(245,242,237,0.55); font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; margin: 0; position: relative; } .contact-h { font-family: var(--font-display); font-weight: 300; color: var(--csh-ivory); font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 18px; position: relative; } .contact-h em.gold { color: var(--csh-gold-lt); font-weight: 600; font-style: normal; } .csh-form-v2 { display: flex; flex-direction: column; gap: 16px; position: relative; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .csh-field-v2 { border: 1px solid rgba(245,242,237,0.12); background: rgba(245,242,237,0.04); padding: 16px 18px; width: 100%; font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--csh-ivory); outline: none; border-radius: 10px; -webkit-appearance: none; transition: border-color .25s, background .25s; } .csh-field-v2::placeholder { color: rgba(245,242,237,0.42); } .csh-field-v2:hover { border-color: rgba(161,98,7,0.4); } .csh-field-v2:focus { border-color: var(--csh-gold); background: rgba(245,242,237,0.06); } textarea.csh-field-v2 { resize: vertical; min-height: 130px; font-family: var(--font-body); } .csh-select-v2 { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4ad72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 44px; } .csh-select-v2 option { background: var(--csh-charcoal); color: var(--csh-ivory); } .form-actions { display: flex; justify-content: flex-end; margin-top: 8px; position: relative; } .send-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--csh-ivory); color: var(--csh-charcoal); border: 1px solid var(--csh-ivory); border-radius: 12px; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease-spring), box-shadow .3s; } .send-btn:hover { background: var(--csh-gold); color: var(--csh-ivory); border-color: var(--csh-gold); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(161,98,7,0.5); } .send-btn:active { transform: translateY(0); } .send-btn:focus-visible { outline: 2px solid var(--csh-gold-lt); outline-offset: 3px; } .send-btn svg { width: 16px; height: 16px; } .form-success { display: none; text-align: center; padding: 40px 0; font-family: var(--font-display); font-style: italic; color: var(--csh-gold-lt); font-size: 1.4rem; } .form-success.show { display: block; } @media (max-width: 1100px) { .contact-form-wrap { padding: 72px 48px; } .map-pin-card { max-width: 260px; min-width: 220px; padding: 14px 18px; } } @media (max-width: 900px) { .contact-v2 { grid-template-columns: 1fr; min-height: 0; } /* Hide the map background entirely on mobile — form-only layout. */ .contact-bg { display: none !important; } .contact-bg-fade { background: linear-gradient(180deg, rgba(28,25,23,0) 0%, rgba(28,25,23,0) 18%, rgba(28,25,23,0.6) 30%, rgba(28,25,23,0.95) 42%, var(--csh-charcoal) 50%, var(--csh-charcoal) 100%); } .contact-form-wrap { background: var(--csh-charcoal); } /* Pin and card stay at the same geographic spot (25.1%, 54.3% of contact-bg) — but at this scale 54.3% × 420 = 228px down */ .map-pin-marker { width: 32px; height: 44px; } .map-pin-card { max-width: 62vw; min-width: 0; padding: 10px 14px; gap: 6px; } .map-pin-card .map-pin-body { gap: 4px; } .map-pin-card .map-pin-addr { font-size: 0.58rem; letter-spacing: 0.12em; } .map-pin-card .map-pin-line { font-size: 0.68rem; gap: 6px; } .map-pin-card .map-pin-line svg { width: 11px; height: 11px; } .map-pin-card:hover { transform: translateY(-54%); } .contact-form-wrap { grid-column: 1; padding: 56px 24px 56px; margin-top: 0; } .form-row { grid-template-columns: 1fr; } .form-actions { justify-content: stretch; } .send-btn { width: 100%; justify-content: center; } } /* ========== CTA ========== */ .cta { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 65vh; min-height: 500px; } .cta-bg { position: absolute; inset: -10% 0; background: url('https://www.coastalsignaturehomes.net/images/modern-dark-kitchen.jpeg') center/cover no-repeat, #1C1917; } .cta::before { content:''; position:absolute; inset:0; background: linear-gradient(115deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 100%); z-index: 1; } .cta::after { content:''; position:absolute; inset:0; background: rgba(161,98,7,0.05); mix-blend-mode: multiply; pointer-events: none; z-index: 2; } .cta-inner { position: relative; z-index: 3; text-align: center; color: var(--csh-ivory); padding: 0 32px; max-width: 720px; } .cta-inner h2 { font-family: var(--font-display); font-weight: 300; color: var(--csh-ivory); font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.15; margin: 0; text-shadow: 0 4px 40px rgba(0,0,0,0.5); } .cta-inner h2 em { font-style: italic; color: var(--csh-gold-lt); font-weight: inherit; } .cta-btns { margin-top: 40px; display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; } /* ========== FOOTER ========== */ .ft { background: var(--csh-ink); color: rgba(245,242,237,0.6); padding: 80px 64px 40px; position: relative; } .ft-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(161,98,7,0.12); } .ft-brand { font-family: var(--font-display); color: var(--csh-ivory); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; text-decoration: none; } .ft-brand span { color: var(--csh-gold-lt); } .ft-tag { font-family: var(--font-display); font-style: italic; color: rgba(245,242,237,0.55); font-size: 0.95rem; line-height: 1.6; margin-top: 16px; max-width: 320px; font-weight: 300; } .ft-social-row { display: flex; gap: 12px; margin-top: 24px; } .ft-social { width: 36px; height: 36px; border: 1px solid rgba(161,98,7,0.25); display: flex; align-items: center; justify-content: center; color: var(--csh-gold); cursor: none; text-decoration: none; transition: border-color .3s, color .3s; } .ft-social:hover { border-color: var(--csh-gold); color: var(--csh-gold-lt); } .ft-col-h { color: var(--csh-gold); font-size: 0.58rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; margin: 0 0 16px; } .ft-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction: column; gap: 10px; } .ft-col a { color: rgba(245,242,237,0.6); font-size: 0.78rem; font-weight: 300; text-decoration:none; cursor:none; transition: color .25s; } .ft-col a:hover { color: var(--csh-gold-lt); } .ft-bottom { position: relative; z-index: 1; margin-top: 32px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(245,242,237,0.4); } @media (max-width: 900px) { .ft { padding: 64px 24px 32px; } .ft-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .ft-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 540px) { .ft-grid { grid-template-columns: 1fr; } } /* ===================================================== POLISH PASS — depth, mobile-first, conversion, a11y ===================================================== */ /* Scroll progress (top-of-page gold hairline) */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, #A16207, #d4ad72); z-index: 120; pointer-events: none; will-change: width; } /* Sticky mobile CTA dock */ .mobile-cta-dock { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10,10,9,0.93); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-top: 1px solid rgba(161,98,7,0.28); } .mobile-cta-dock a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; gap: 8px; } .mobile-cta-dock .cta-call { background: var(--csh-gold); color: var(--csh-ink); } .mobile-cta-dock .cta-call:active { background: var(--csh-gold-lt); } .mobile-cta-dock .cta-contact { border: 1px solid var(--csh-gold); color: var(--csh-gold-lt); background: transparent; } .mobile-cta-dock svg { width: 14px; height: 14px; } @media (max-width: 900px) { .mobile-cta-dock { display: flex; } body { padding-bottom: 76px; } } /* Back-to-top */ #to-top { position: fixed; right: 18px; bottom: 92px; z-index: 90; width: 44px; height: 44px; background: rgba(10,10,9,0.78); border: 1px solid rgba(161,98,7,0.4); color: var(--csh-gold-lt); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-spring), transform .35s var(--ease-spring), background .3s, border-color .3s; transform: translateY(10px); backdrop-filter: blur(10px); } #to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } #to-top:hover { background: var(--csh-charcoal); color: var(--csh-gold); border-color: var(--csh-gold); } @media (min-width: 901px) { #to-top { bottom: 24px; right: 24px; } } /* Hero — secondary phone CTA + trust strip */ .hero-cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .btn-hero-ghost { border: 1px solid rgba(245,242,237,0.35); color: var(--csh-ivory); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 16px 32px; } .btn-hero-ghost:hover { border-color: var(--csh-gold-lt); } .hero-trust { margin-top: 28px; display: inline-flex; gap: 22px; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,242,237,0.55); font-weight: 500; } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust svg { width: 13px; height: 13px; stroke: var(--csh-gold-lt); } .hero-trust .dot { width: 3px; height: 3px; background: rgba(161,98,7,0.55); border-radius: 50%; } /* Depth — layered shadows on cards */ .proj-card { box-shadow: 0 14px 28px -10px rgba(0,0,0,0.55), 0 30px 60px -22px rgba(0,0,0,0.55); } .proj-card:hover { box-shadow: 0 22px 44px -12px rgba(0,0,0,0.7), 0 50px 90px -16px rgba(161,98,7,0.18), 0 0 0 1px rgba(161,98,7,0.32); } .svc-card { box-shadow: 0 16px 30px -10px rgba(0,0,0,0.5), 0 32px 64px -22px rgba(0,0,0,0.5); } .svc-card:hover { box-shadow: 0 28px 60px -12px rgba(0,0,0,0.72), 0 0 0 1px rgba(161,98,7,0.34); } /* Button micro-lift */ .btn-wipe { transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), border-color .3s; will-change: transform; } .btn-wipe:hover { transform: translateY(-2px); } .btn-hero { box-shadow: 0 1px 0 rgba(161,98,7,0.25), 0 14px 32px -10px rgba(161,98,7,0.32); } .btn-hero:hover { box-shadow: 0 1px 0 rgba(212,173,114,0.5), 0 22px 44px -10px rgba(161,98,7,0.55); } .btn-dark { box-shadow: 0 12px 28px -10px rgba(0,0,0,0.45); } .btn-dark:hover { box-shadow: 0 18px 44px -10px rgba(0,0,0,0.65); } /* Nav touch targets + visible call CTA on mobile */ .csh-nav-lnk { padding: 10px 4px; } .btn-nav { min-height: 44px; display: inline-flex; align-items: center; } /* Mobile-friendly disable of custom cursor on any touch device */ @media (pointer: coarse), (hover: none) { body, a, button, input, textarea, select, .btn-wipe, .csh-nav-brand, .csh-nav-lnk, .ft-social, .ft-col a, .gal-item, .proj-card, .svc-card, .contact-value, .c-link { cursor: auto !important; } #csh-cursor-dot, #csh-cursor-ring { display: none !important; } } /* On touch, reveal project/service copy by default — no hover available */ @media (hover: none) { .proj-desc { max-height: 120px; color: rgba(245,242,237,0.78); } .proj-arrow { opacity: 1; transform: none; } .svc-text { max-height: 160px; color: rgba(245,242,237,0.7); } .svc-line { width: 32px; } } /* === MOBILE-FIRST FIXES === */ @media (max-width: 900px) { .csh-nav { padding: 16px 20px; } .csh-nav-brand { font-size: 1.05rem; } .hero { min-height: 600px; } .hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); margin-bottom: 20px; } .hero-eyebrow { font-size: 0.55rem; letter-spacing: 0.28em; margin-bottom: 20px; } .hero-meta { font-size: 0.58rem; letter-spacing: 0.2em; margin-bottom: 28px; } .hero-meta .dot { margin: 0 8px; } .hero-frame { padding: 0 20px; } .section-head { padding: 0 20px; margin-bottom: 40px; } .section-head h2 { font-size: clamp(2rem, 7vw, 2.6rem); } .csh-stat { padding: 48px 16px; } .csh-stat-num { font-size: clamp(2.6rem, 11vw, 3.6rem); margin-bottom: 10px; } .csh-stat-lbl { font-size: 0.62rem; letter-spacing: 0.22em; } .proj-grid { padding: 0 16px 16px; gap: 16px; } .proj-card .copy { padding: 28px; } .brand-statement { padding: 96px 24px; } .brand-statement p { font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.22; } .gal-section { padding: 56px 0; } .gal-strip { height: auto; flex-direction: column; } .gal-item { flex: 0 0 96px; min-height: 96px; } .gal-item.active { flex: 0 0 360px; } .gal-cue { width: 32px; height: 32px; top: 12px; right: 12px; } .process { padding: 80px 20px; } .proc-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .proc-grid .proc-step:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; } .step-circle { width: 64px; height: 64px; margin-bottom: 20px; font-size: 1.1rem; } .step-desc { font-size: 0.66rem; } .testimonials { padding: 64px 20px; } .t-card { padding: 28px 22px; } .t-body { font-size: 0.92rem; } .contact-form-wrap { padding: 48px 20px; } .contact h2 { font-size: clamp(2rem, 7vw, 2.6rem); } .cta { min-height: 440px; height: auto; padding: 96px 20px; } .cta-btns { flex-direction: column; gap: 12px; width: 100%; } .cta-btns .btn-wipe { width: 100%; text-align: center; justify-content: center; } .ft { padding: 56px 20px 24px; } .ft-grid { gap: 32px; } .ft-bottom { font-size: 0.55rem; letter-spacing: 0.1em; gap: 8px; } .hero-scroll { bottom: 28px; } } @media (max-width: 540px) { .proc-grid { grid-template-columns: 1fr; gap: 28px; } .stats { grid-template-columns: 1fr 1fr; } .csh-stat:nth-child(odd) { border-right: 1px solid rgba(161,98,7,0.08); } .csh-stat:nth-child(even) { border-right: 0; } .csh-stat:nth-child(1), .csh-stat:nth-child(2) { border-bottom: 1px solid rgba(161,98,7,0.08); } .form-row { grid-template-columns: 1fr; } } /* ========== GLOBAL FLOWING GOLD CURVES (home + subpages) ========== */ body.home-curves{ position: relative; } body.home-curves::before, body.home-curves::after{ content: ""; position: fixed; inset: -8vh -8vw; pointer-events: none; z-index: 1; transform-origin: 0% 50%; background-repeat: no-repeat; background-size: 100% 100%; mix-blend-mode: screen; opacity: 1; will-change: transform; } body.home-curves::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23A16207' stroke-width='1'%3E%3Cg stroke-opacity='0.13'%3E%3Cpath d='M-200,-100 Q200,80 400,180 T800,420 T1200,640 T1600,860'/%3E%3Cpath d='M-200,-40 Q220,140 420,240 T820,480 T1220,700 T1600,920'/%3E%3Cpath d='M-200,20 Q240,200 440,300 T840,540 T1240,760 T1620,980'/%3E%3Cpath d='M-160,80 Q260,260 460,360 T860,600 T1260,820 T1640,1040'/%3E%3Cpath d='M-120,150 Q280,330 480,430 T880,670 T1280,890 T1660,1110'/%3E%3Cpath d='M-80,230 Q300,400 500,500 T900,740 T1300,960 T1680,1180'/%3E%3Cpath d='M-40,320 Q320,470 520,570 T920,810 T1320,1030 T1700,1240'/%3E%3Cpath d='M0,420 Q340,540 540,640 T940,880 T1340,1100 T1720,1300'/%3E%3Cpath d='M60,520 Q360,610 560,710 T960,950 T1360,1170 T1740,1360'/%3E%3Cpath d='M120,620 Q380,680 580,780 T980,1020 T1380,1240 T1760,1420'/%3E%3C/g%3E%3Cg stroke-opacity='0.1'%3E%3Cpath d='M-220,-60 Q210,90 410,200 T810,440 T1210,660 T1610,880'/%3E%3Cpath d='M-180,40 Q250,220 450,320 T850,560 T1250,780 T1630,1000'/%3E%3Cpath d='M-100,180 Q290,340 490,440 T890,680 T1290,900 T1670,1120'/%3E%3Cpath d='M0,360 Q330,500 530,600 T930,840 T1330,1060 T1710,1280'/%3E%3Cpath d='M100,560 Q370,650 570,750 T970,990 T1370,1210 T1750,1390'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); animation: curves-A 22s linear infinite; } body.home-curves::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23A16207' stroke-width='1'%3E%3Cg stroke-opacity='0.18'%3E%3Cpath d='M-200,-100 Q200,80 400,180 T800,420 T1200,640 T1600,860'/%3E%3Cpath d='M-200,-40 Q220,140 420,240 T820,480 T1220,700 T1600,920'/%3E%3Cpath d='M-200,20 Q240,200 440,300 T840,540 T1240,760 T1620,980'/%3E%3Cpath d='M-160,80 Q260,260 460,360 T860,600 T1260,820 T1640,1040'/%3E%3Cpath d='M-120,150 Q280,330 480,430 T880,670 T1280,890 T1660,1110'/%3E%3Cpath d='M-80,230 Q300,400 500,500 T900,740 T1300,960 T1680,1180'/%3E%3Cpath d='M-40,320 Q320,470 520,570 T920,810 T1320,1030 T1700,1240'/%3E%3Cpath d='M0,420 Q340,540 540,640 T940,880 T1340,1100 T1720,1300'/%3E%3Cpath d='M60,520 Q360,610 560,710 T960,950 T1360,1170 T1740,1360'/%3E%3Cpath d='M120,620 Q380,680 580,780 T980,1020 T1380,1240 T1760,1420'/%3E%3C/g%3E%3Cg stroke-opacity='0.13'%3E%3Cpath d='M-220,-60 Q210,90 410,200 T810,440 T1210,660 T1610,880'/%3E%3Cpath d='M-180,40 Q250,220 450,320 T850,560 T1250,780 T1630,1000'/%3E%3Cpath d='M-100,180 Q290,340 490,440 T890,680 T1290,900 T1670,1120'/%3E%3Cpath d='M0,360 Q330,500 530,600 T930,840 T1330,1060 T1710,1280'/%3E%3Cpath d='M100,560 Q370,650 570,750 T970,990 T1370,1210 T1750,1390'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); mix-blend-mode: multiply; animation: curves-B 28s linear infinite; } @keyframes curves-A{ 0% { transform: translate3d(0,0,0) scale(1.05) skewY(0.4deg); } 20% { transform: translate3d(-1.6vw,-0.8vh,0) scale(1.30) skewY(-0.3deg); } 40% { transform: translate3d(-3.2vw, 0.6vh,0) scale(1.10) skewY(0.5deg); } 60% { transform: translate3d(-4.8vw,-0.4vh,0) scale(1.40) skewY(-0.4deg); } 80% { transform: translate3d(-6.4vw, 0.8vh,0) scale(1.15) skewY(0.3deg); } 100% { transform: translate3d(-8vw, 0, 0) scale(1.05) skewY(0.4deg); } } @keyframes curves-B{ 0% { transform: translate3d(0,0,0) scale(1.35) skewX(-0.3deg); } 25% { transform: translate3d(-1.4vw, 0.6vh,0) scale(1.08) skewX(0.4deg); } 50% { transform: translate3d(-2.8vw,-0.7vh,0) scale(1.45) skewX(-0.5deg); } 75% { transform: translate3d(-4.2vw, 0.5vh,0) scale(1.10) skewX(0.4deg); } 100% { transform: translate3d(-5.6vw, 0, 0) scale(1.35) skewX(-0.3deg); } } @media (prefers-reduced-motion: reduce){ body.home-curves::before, body.home-curves::after{ animation: none; } } /* Lift content with images/photo backgrounds above the curves layer. */ body.home-curves .proj-card, body.home-curves .t-card2, body.home-curves .about-img-wrap, body.home-curves .about-portrait, body.home-curves .gal-item, body.home-curves .svc-card, body.home-curves .stats-wrap > .stats > .csh-stat, body.home-curves .hero, body.home-curves .sub-hero, body.home-curves .proj-media, body.home-curves .proc-step, body.home-curves .svc-row, body.home-curves .t-avatar{ position: relative; z-index: 5; isolation: isolate; } /* Catch-all: every image/picture sits above the curves layer so stripes never overlap visual content. (Excludes