/*
Theme Name: Reachyou 3D
Theme URI: https://reachyou.in
Author: Reachyou.in
Description: A sculptural 3D digital marketing theme for Reachyou.in.
Version: 1.0.0
Requires at least: 6.0
*/
:root { --background: oklch(.965 .012 84); --foreground: oklch(.14 .008 72); --primary: oklch(.67 .21 29); --primary-foreground: oklch(.98 .01 80); --muted: oklch(.9 .012 80); --muted-foreground: oklch(.45 .02 70); --border: oklch(.23 .01 70 / 24%); --accent: oklch(.75 .18 36); --radius: .25rem; }
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
#reachyou-3d { position: fixed; inset: 0 0 0 auto; width: 58vw; z-index: 1; pointer-events: none; opacity: .98; width:100%; height:100%; }
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
main { position: relative; z-index: 3; }
.site-nav { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.15rem 2rem; font-size: .68rem; text-transform: uppercase; letter-spacing: 0; mix-blend-mode: difference; color: oklch(.98 .01 80); }
.brand { font-family: var(--font-display); font-size: 1.5rem; text-transform: none; font-style: italic; justify-self: start; }.brand span{color:var(--accent)}
.site-nav nav { display:flex; gap:1.5rem }.site-nav nav a,.nav-cta{opacity:.72;transition:opacity .2s}.site-nav nav a:hover,.nav-cta:hover{opacity:1}.nav-cta{display:flex;align-items:center;gap:.3rem;justify-self:end}
.hero { min-height: 100svh; padding: 8rem 3.5vw 2rem; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(90deg,var(--background) 0%,var(--background) 42%,transparent 72%); }
.eyebrow,.section-kicker { font-size:.66rem; text-transform:uppercase; display:flex; gap:.5rem; align-items:center; letter-spacing:0; }
h1,h2,h3,p { margin:0; }
h1 { width: 46vw; max-width: 7.2ch; font-size: clamp(4rem, 6.2vw, 7rem); line-height:.82; font-weight:500; letter-spacing:0; text-transform:uppercase; }
h1 span { display:block; font-family:var(--font-sans); font-size:.12em; line-height:1.3; margin-bottom:1.1rem; font-weight:700; }
h1 em,h2 em,h2 i { font-family:var(--font-display); text-transform:none; font-weight:400; color:var(--primary); }
.hero-foot { display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem }.hero-foot p{width:min(31rem,70vw);font-size:.95rem;line-height:1.55}.hero-foot a{width:3.5rem;height:3.5rem;border:1px solid var(--border);display:grid;place-items:center;border-radius:50%;transition:transform .25s,background .25s}.hero-foot a:hover{transform:translateY(5px);background:var(--primary);color:var(--primary-foreground)}
.manifesto,.services,.contact { min-height:100svh;padding:8rem 3.5vw 4rem;display:flex;flex-direction:column;position:relative; }
.manifesto { background:var(--foreground); color:var(--background); margin-top:15vh; }
.manifesto h2,.services h2,.contact h2 { font-size:clamp(3rem,7.7vw,8rem);line-height:.91;letter-spacing:0;font-weight:500;text-transform:uppercase;max-width:14ch;margin:auto 0; }
.manifesto-grid { display:grid;grid-template-columns:1fr 1fr;gap:15vw;border-top:1px solid oklch(.95 .01 80 / 25%);padding-top:1.5rem }.manifesto-grid p{font-size:1rem;line-height:1.6;max-width:32rem}
.services { background:var(--background); }
.services h2 { font-size:clamp(2.5rem,6vw,6.5rem);margin:6rem 0 4rem; }
.service-list { border-top:1px solid var(--border); }.service-list article{display:grid;grid-template-columns:13rem 1fr 1fr auto;gap:2rem;align-items:center;border-bottom:1px solid var(--border);padding:2rem 0;transition:padding .25s,background .25s}.service-list article:hover{padding-left:1rem;background:oklch(.67 .21 29 / 7%)}.service-list span{font-size:.62rem;text-transform:uppercase}.service-list h3{font-family:var(--font-display);font-size:1.65rem;font-weight:400}.service-list p{font-size:.87rem;line-height:1.55;color:var(--muted-foreground);max-width:27rem}
.ticker { overflow:hidden;background:var(--primary);color:var(--primary-foreground);padding:1.3rem 0;font-size:clamp(1.3rem,3vw,3rem);font-family:var(--font-display);font-style:italic;white-space:nowrap; }.ticker div{width:max-content;animation:ticker 20s linear infinite}.ticker span{font-family:var(--font-sans);font-style:normal;text-transform:uppercase}@keyframes ticker{to{transform:translateX(-50%)}}
.contact { background:var(--foreground);color:var(--background);min-height:100svh }.contact h2{max-width:13ch}.contact>a{font-size:clamp(1rem,2.2vw,2rem);display:flex;align-items:center;gap:.6rem;border-bottom:1px solid oklch(.95 .01 80 / 35%);padding-bottom:1rem;width:max-content;max-width:100%;transition:color .2s}.contact>a:hover{color:var(--primary)}footer{margin-top:auto;padding-top:5rem;display:flex;justify-content:space-between;font-size:.65rem;text-transform:uppercase;color:oklch(.75 .01 80)}
@media(max-width:800px){.site-nav{grid-template-columns:1fr auto;padding:1rem}.site-nav nav{display:none}.nav-cta{font-size:.55rem}.hero{padding:7rem 1rem 1.5rem}.hero h1{width:100%;max-width:none;font-size:clamp(3.5rem,16vw,6rem)}.manifesto,.services,.contact{padding:6rem 1rem 2rem}.manifesto{margin-top:8vh}.manifesto-grid{grid-template-columns:1fr;gap:1.5rem}.service-list article{grid-template-columns:1fr auto;gap:1rem}.service-list article span,.service-list article p{grid-column:1 / -1}.service-list article svg{grid-column:2;grid-row:2}.services h2{margin:4rem 0 2rem}footer{gap:2rem;align-items:flex-end}#reachyou-3d{width:100vw;height:34vh;top:auto;opacity:.82}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}}