/* ============================================================ RAO v2 — design system Dark-only system (v2.19.0): the light theme and its switch were removed — dark is the single, permanent system. Fonts: Space Grotesk (display) · Manrope (body) — self-hosted ============================================================ */ /* ---------- self-hosted fonts (latin) ---------- */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SpaceGrotesk-400.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/SpaceGrotesk-500.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/SpaceGrotesk-600.woff2') format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/SpaceGrotesk-700.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Manrope-400.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Manrope-500.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Manrope-600.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Manrope-700.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Manrope-800.woff2') format('woff2')} /* ---------- tokens ---------- */ :root{ --font-d:'Space Grotesk',system-ui,sans-serif; --font-b:'Manrope',system-ui,sans-serif; --bg:#121210; --bg-2:#191916; --surface:#1B1B18; --surface-2:#22221E; --ink:#F1F1EA; --ink-2:#B6B6AB; --ink-3:#8F8F85; /* ≥4.5:1 on near-black */ --line:#2D2D28; --line-2:#232320; --accent:#A78BFA; --accent-ink:#17122B; --accent-deep:#7C3AED; --accent-strong:#A78BFA; /* light purple holds contrast on dark for small text */ --char:#0E0E0C; --char-2:#161613; --char-3:#22221E; --on-char:#F2F2EC; --on-char-2:#B9B9AE; --on-char-3:#7E7E74; --on-char-line:#2E2E29; --r-lg:20px; --r-md:14px; --r-sm:9px; --shadow:0 24px 70px -28px rgba(0,0,0,.6); --shadow-sm:0 10px 30px -14px rgba(0,0,0,.5); --wrap:1320px; --pad:clamp(20px,4vw,48px); --sec:clamp(96px,10vw,150px); --sec-tight:clamp(56px,6vw,88px); /* rhythm right after the hero */ --sec-air:clamp(120px,13vw,200px); /* generous air before the final CTA */ --ease:cubic-bezier(.22,.8,.24,1); } /* ---------- reset / base ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-b);font-size:16.5px;line-height:1.65;color:var(--ink); background:var(--bg);overflow-x:hidden; transition:background .45s var(--ease),color .45s var(--ease); } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit} ::selection{background:var(--accent);color:var(--accent-ink)} h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.04;letter-spacing:-.028em;text-wrap:balance} /* visible keyboard focus everywhere */ :focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px} /* skip link — first body element, revealed on focus */ .skip-link{position:absolute;left:16px;top:-72px;z-index:2000;background:var(--ink);color:var(--bg); font-family:var(--font-d);font-weight:600;font-size:14px;letter-spacing:.02em; padding:12px 22px;border-radius:999px;transition:top .25s var(--ease)} .skip-link:focus-visible{top:14px} /* film grain over everything */ body::after{ content:"";position:fixed;inset:0;z-index:1200;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} section{padding:var(--sec) 0;position:relative} section[id]{scroll-margin-top:80px} /* section rhythm — tighter right after the hero, generous air before the final CTA */ #whatwedo{padding:var(--sec-tight) 0} #faq{padding-bottom:var(--sec-air)} /* (blueprint gridlines removed in v2.2.0 — film grain is the site-wide texture) */ /* ---------- type utilities ---------- */ .eyebrow{ display:flex;align-items:center;gap:12px; font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-2);margin-bottom:26px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent-deep);flex:none} .eyebrow .e-idx{color:var(--ink-3);letter-spacing:.1em} .sec-title{font-size:clamp(34px,4.6vw,58px);max-width:16ch} .sec-lead{margin-top:18px;max-width:62ch;color:var(--ink-2);font-size:clamp(16px,1.4vw,18.5px)} /* ---------- section header variants ---------- */ /* split: title left, lead right on desktop; stacked on mobile */ .sec-head.sec-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:end} .sec-head.sec-split .eyebrow{grid-column:1/-1;margin-bottom:0} .sec-head.sec-split .sec-lead{margin-top:0} /* oversized index numeral behind the header (uses the eyebrow's .e-idx) */ .sec-head.sec-index-xl{position:relative} .sec-head.sec-index-xl .e-idx{ position:absolute;top:-.35em;right:0;z-index:0;pointer-events:none;user-select:none; font-family:var(--font-d);font-weight:700;font-size:clamp(96px,12vw,190px); letter-spacing:-.045em;line-height:1;color:var(--line); } .sec-head.sec-index-xl .eyebrow,.sec-head.sec-index-xl .sec-title,.sec-head.sec-index-xl .sec-lead{position:relative;z-index:1} /* big centered statement header, minimal eyebrow */ .sec-head.sec-statement{text-align:center;max-width:940px;margin-left:auto;margin-right:auto} .sec-head.sec-statement .eyebrow{justify-content:center} .sec-head.sec-statement .sec-title{margin-left:auto;margin-right:auto;font-size:clamp(40px,5.6vw,72px)} .sec-head.sec-statement .sec-lead{margin-left:auto;margin-right:auto} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-d);font-weight:600;font-size:15.5px;letter-spacing:.01em; padding:16px 30px;border-radius:999px;border:1px solid transparent; transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s,box-shadow .3s; white-space:nowrap; } .btn .arw{transition:transform .3s var(--ease);font-weight:700} .btn:hover .arw{transform:translateX(5px)} .btn-primary{background:var(--ink);color:var(--bg)} .btn-primary:hover{background:var(--accent);color:var(--accent-ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .btn-ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);background:color-mix(in srgb,currentColor 6%,transparent)} .btn-lime{background:var(--accent);color:var(--accent-ink)} .btn-lime:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px color-mix(in srgb,var(--accent) 55%,transparent)} .btn-sm{padding:12px 22px;font-size:14px} /* arrow affordance — spans now hold a 16px inline SVG (currentColor) */ .arw{display:inline-flex;vertical-align:-2px} .arw svg{width:16px;height:16px;display:block} /* ---------- scroll reveal (progressive enhancement: hidden only when JS runs) ---------- */ html.js .reveal,html.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)} html.js .reveal.in,html.js .rv.in,.reveal.in,.rv.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ html.js .reveal,html.js .rv{opacity:1;transform:none;filter:none;transition:none} html{scroll-behavior:auto} .mq-track,.float-slow,.float-slower{animation:none} .hero-title .row>span{animation:none;transform:none} .wiz-step.on{animation:none} } /* ============================================================ HEADER ============================================================ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:900; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); transition:background .45s var(--ease),border-color .45s; } .nav{display:flex;align-items:center;justify-content:space-between;height:72px} .logo{font-family:var(--font-d);font-weight:700;font-size:21px;letter-spacing:.14em} .logo .dot{color:var(--accent-strong)} .nav-links{display:flex;gap:34px;align-items:center} .nav-links a{font-family:var(--font-d);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--ink-2);position:relative;transition:color .25s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent-deep);transition:width .3s var(--ease)} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:14px} .burger{display:none;flex-direction:column;gap:6px;padding:14px 10px} .burger i{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s} /* ============================================================ HERO ============================================================ */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 90px;overflow:hidden} .hero-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,5.5vw,96px);align-items:center;position:relative;z-index:2} .hero-cols.hero-single{grid-template-columns:minmax(0,900px);justify-content:start} .hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .hero-eyebrow{margin-bottom:30px} .hero-title{ font-size:clamp(64px,9.5vw,150px);font-weight:700;letter-spacing:-.045em;line-height:.9; text-transform:uppercase; } .hero-title .row{display:block;overflow:hidden} .hero-title .row>span{display:inline-block;transform:translateY(110%);animation:riseUp 1s var(--ease) forwards} .hero-title .row:nth-child(2)>span{animation-delay:.1s} .hero-title .row:nth-child(3)>span{animation-delay:.2s} @keyframes riseUp{to{transform:none}} .hero-title .per{color:var(--accent-deep)} [data-theme="dark"] .hero-title .per{color:var(--accent)} .hero-title .outline{color:transparent;-webkit-text-stroke:2px var(--ink)} .hero-title .hl{color:transparent;-webkit-text-stroke:2px var(--ink)} .hero-sub{font-size:clamp(17px,1.6vw,20px);line-height:1.62;color:var(--ink-2);max-width:46ch;margin-top:36px} .hero-sub strong{color:var(--ink);font-weight:600} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero-proof{ display:flex;align-items:center;gap:10px;margin-top:30px; font-family:var(--font-d);font-size:13.5px;font-weight:500;letter-spacing:.06em;color:var(--ink-3); } .hero-proof .star{color:var(--accent-strong);font-size:15px} .hero-proof b{color:var(--ink);font-weight:700} /* hero portrait — premium framed treatment, theme-aware in both modes */ .hero-media{position:relative;justify-self:center;width:100%;max-width:500px;min-width:0} .hero-frame{ position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg); border:1px solid var(--line);background:var(--surface); box-shadow:0 44px 90px -30px rgba(23,23,21,.38); } .hero-frame img{display:block;width:100%;height:auto;aspect-ratio:4/4.8;object-fit:cover;filter:saturate(.94) contrast(1.02)} [data-theme="dark"] .hero-frame img{filter:saturate(.92) contrast(1.06) brightness(.94)} [data-theme="dark"] .hero-frame{box-shadow:0 44px 90px -30px rgba(0,0,0,.65)} .hero-frame::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 2px 0 0 0 color-mix(in srgb,var(--accent) 65%,transparent); } /* ============================================================ PROJECT IMAGE SLOT — contract: .mock fills its card; any inside covers it. (Pure-CSS mockup scenes were removed in v2.2.0; real featured images now fill this slot.) ============================================================ */ .mock{position:absolute;inset:0;overflow:hidden} .mock img{width:100%;height:100%;object-fit:cover} /* browser chrome */ /* ---- phone frame ---- */ .phone{position:absolute;border-radius:34px;border:10px solid #1a1a18;background:#fff;overflow:hidden;box-shadow:var(--shadow)} .phone .p-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:90px;height:22px;background:#1a1a18;border-radius:12px;z-index:3} .phone .p-body{position:absolute;inset:0;padding:44px 16px 16px} /* ---- floating mini cards ---- */ .float-slow{animation:floaty 7s ease-in-out infinite} .float-slower{animation:floaty 9s ease-in-out infinite reverse} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* ============================================================ TRUST STRIP ============================================================ */ .trust{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);position:relative;transition:background .45s,border-color .45s} .trust::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-deep),transparent);opacity:.55} .trust-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:24px;padding-bottom:24px;flex-wrap:wrap} .trust-label{font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)} .trust-facts{display:flex;align-items:stretch;flex-wrap:wrap} .tfact{display:inline-flex;align-items:center;gap:10px;padding:4px 24px;border-left:1px solid var(--line);white-space:nowrap;font-family:var(--font-d)} .tfact:first-child{border-left:0;padding-left:0} .tfact b{font-size:19px;font-weight:700;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:7px} .tfact em{font-style:normal;font-size:13px;color:var(--ink-3)} .tfact .star{color:var(--accent-strong);display:inline-flex;line-height:0} .tfact .star svg{width:16px;height:16px} .trust-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);border:1px solid var(--accent-deep);border-radius:999px;padding:12px 24px;transition:background .3s,border-color .3s,color .3s,gap .3s} .trust-link:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);gap:15px} .trust-link .arw{display:inline-flex;line-height:0} @media(max-width:860px){ .trust-in{flex-direction:column;justify-content:center;text-align:center;gap:18px} .tfact{padding:4px 16px} .tfact:first-child{padding-left:16px} } /* ============================================================ WHAT I DO ============================================================ */ .wwd-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:56px} .wwd-item{padding:44px 36px 48px;border-left:1px solid var(--line);position:relative;transition:background .35s} .wwd-item:first-child{border-left:0;padding-left:0} .wwd-item:hover{background:var(--surface)} .wwd-num{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--ink-3);margin-bottom:22px;display:block} .wwd-item h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:14px} .wwd-item p{color:var(--ink-2);max-width:30ch} .wwd-item::after{content:"";position:absolute;left:36px;bottom:0;width:0;height:3px;background:var(--accent-deep);transition:width .45s var(--ease)} .wwd-item:first-child::after{left:0} .wwd-item:hover::after{width:calc(100% - 72px)} .wwd-item:first-child:hover::after{width:calc(100% - 36px)} /* ============================================================ SERVICES — numbered cards ============================================================ */ .svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap} .svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.5vw,32px);margin-top:60px} .svc-card{ position:relative;border:1px solid transparent;border-radius:var(--r-lg); padding:clamp(30px,3.2vw,46px);overflow:hidden;color:#fff; transition:transform .45s var(--ease),box-shadow .35s; } /* each card gets its own bold color */ .svc-card.svc-c1{background:linear-gradient(135deg,#2f63f6,#1e40af)} .svc-card.svc-c2{background:linear-gradient(135deg,#8b5cf6,#6d28d9)} .svc-card.svc-c3{background:linear-gradient(135deg,#10b981,#047857)} .svc-card.svc-c4{background:linear-gradient(135deg,#f43f5e,#be123c)} .svc-card.svc-c5{background:linear-gradient(135deg,#f59e0b,#b45309)} .svc-card.svc-c6{background:linear-gradient(135deg,#06b6d4,#0e7490)} .svc-card.svc-c7{background:linear-gradient(135deg,#ec4899,#be185d)} .svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .svc-num{ display:block;font-family:var(--font-d);font-weight:700;letter-spacing:-.04em;line-height:1; font-size:clamp(64px,6vw,96px);color:rgba(255,255,255,.9);margin-bottom:20px;user-select:none; } .svc-card h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.01em;margin-bottom:10px;color:#fff} .svc-tag{color:rgba(255,255,255,.85);font-size:16px;line-height:1.6;max-width:46ch} .svc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px} .svc-tags span{font-family:var(--font-d);font-size:12px;font-weight:500;letter-spacing:.05em;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 15px;color:#fff;background:rgba(255,255,255,.12)} .svc-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--font-d);font-weight:600;font-size:15.5px;color:#fff;border-bottom:2px solid rgba(255,255,255,.4);padding-bottom:2px;transition:border-color .3s} .svc-cta .arw{transition:transform .3s var(--ease)} .svc-card:hover .svc-cta{border-color:#fff} .svc-card:hover .svc-cta .arw{transform:translateX(5px)} @media (max-width:860px){.svc-cards{grid-template-columns:1fr}} /* ============================================================ PORTFOLIO — asymmetric editorial grid, image-led cards ============================================================ */ .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap} .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px} .filter{ font-family:var(--font-d);font-size:13.5px;font-weight:500;letter-spacing:.04em; border:1px solid var(--line);border-radius:999px;padding:11px 22px;color:var(--ink-2); transition:all .28s var(--ease);background:transparent; } .filter:hover{border-color:var(--ink);color:var(--ink)} .filter.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} /* count badge on filter tabs */ .f-count{ display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px; margin-left:10px;padding:0 8px;border-radius:999px; font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.02em; background:color-mix(in srgb,var(--ink) 10%,transparent);color:inherit; } .filter.on .f-count{background:color-mix(in srgb,var(--accent-ink) 22%,transparent)} /* uniform card grid (image → title → subtitle) */ .work-grid.work-grid--uniform{grid-template-columns:repeat(3,1fr);align-items:start} .work-grid.work-grid--uniform .proj{grid-column:auto} .work-grid.work-grid--uniform .proj.offset{margin-top:0} @media (max-width:1020px){.work-grid.work-grid--uniform{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.work-grid.work-grid--uniform{grid-template-columns:1fr}} .work-grid{ display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,44px); margin-top:56px;align-items:start; } .proj{grid-column:span 6;position:relative;transition:opacity .5s var(--ease),transform .5s var(--ease)} .proj.span-7{grid-column:span 7} .proj.span-5{grid-column:span 5} .proj.offset{margin-top:clamp(40px,6vw,110px)} .proj.hide{display:none} .proj-shot{ position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; aspect-ratio:16/10.5;background:var(--surface-2);cursor:pointer; transition:border-color .35s,box-shadow .35s,transform .45s var(--ease); } .proj-shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .proj:hover .proj-shot>img{transform:scale(1.035)} /* editorial card for projects without a featured image — intentional next to photo cards */ .proj-fallback{ position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; aspect-ratio:16/10.5;background:var(--surface); display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start; padding:clamp(26px,3.2vw,42px); transition:border-color .35s,box-shadow .35s,transform .45s var(--ease),background .45s; } .proj-fallback::before{ content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%); pointer-events:none; } .proj:hover .proj-fallback{box-shadow:var(--shadow);transform:translateY(-6px)} .proj-index{ position:absolute;top:14px;left:clamp(26px,3.2vw,42px); font-family:var(--font-d);font-weight:700;font-size:clamp(72px,7.5vw,116px); letter-spacing:-.045em;line-height:1;color:var(--line);user-select:none; } .proj-mono{ position:absolute;top:clamp(22px,3vw,34px);right:clamp(26px,3.2vw,42px); width:58px;height:58px;border-radius:18px;background:var(--ink);color:var(--bg); font-family:var(--font-d);font-weight:700;font-size:18px;letter-spacing:.06em; display:flex;align-items:center;justify-content:center; } .proj-fallback .proj-name{font-size:clamp(26px,2.6vw,38px);position:relative;max-width:16ch} .proj-fallback .proj-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative} .proj-fallback .proj-tags span{ font-family:var(--font-d);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--ink-2);background:var(--bg); } .proj-shot .mock{transition:transform .8s var(--ease)} .proj:hover .proj-shot{box-shadow:var(--shadow);transform:translateY(-6px);border-color:var(--line)} .proj:hover .proj-shot .mock{transform:scale(1.035)} .shot-view{ position:absolute;right:18px;bottom:18px;z-index:4; font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.04em; background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px; opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease); display:inline-flex;align-items:center;gap:8px; } .proj:hover .shot-view{opacity:1;transform:none} .shot-cat{ position:absolute;left:18px;top:18px;z-index:4; font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px); border:1px solid var(--line);padding:8px 15px;border-radius:999px;color:var(--ink-2); } .proj-meta{padding:22px 6px 0} .proj-meta .proj-name{font-size:clamp(20px,1.9vw,26px);letter-spacing:-.01em} .proj-sub{ margin-top:8px;color:var(--ink-2);font-size:14.5px;line-height:1.55; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; } .work-foot{margin-top:70px;margin-bottom:64px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:34px} .work-note{color:var(--ink-2);font-size:15px;max-width:60ch} .client-marquee{border-bottom:1px solid var(--line-2);padding:40px 0 36px;position:relative} .mq-label{ text-align:center;margin:0 0 24px; font-family:var(--font-d);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3); } .mq-viewport{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)} .mq-track{display:flex;gap:0;width:max-content;animation:mq 36s linear infinite} .mq-track span{font-family:var(--font-d);font-size:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 34px;white-space:nowrap;display:flex;align-items:center;gap:68px} .mq-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-deep);flex:none} @keyframes mq{to{transform:translateX(-50%)}} /* ---------- case study modal ---------- */ .case-modal{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:24px} .case-modal.open{display:flex} .case-backdrop{position:absolute;inset:0;background:rgba(15,15,12,.62);backdrop-filter:blur(10px);opacity:0;transition:opacity .4s} .case-modal.open .case-backdrop{opacity:1} .case-card{ position:relative;width:min(1060px,100%);max-height:90svh;overflow:auto; background:var(--bg);border:1px solid var(--line);border-radius:24px; transform:translateY(40px) scale(.98);opacity:0;transition:transform .5s var(--ease),opacity .4s; } .case-modal.open .case-card{transform:none;opacity:1} .case-hero{position:relative;aspect-ratio:16/8;overflow:hidden;border-bottom:1px solid var(--line)} .case-close{ position:absolute;top:18px;right:18px;z-index:5;width:48px;height:48px;border-radius:50%; background:var(--ink);color:var(--bg);font-size:18px;display:flex;align-items:center;justify-content:center; transition:transform .3s var(--ease),background .3s; } .case-close:hover{transform:rotate(90deg);background:var(--accent);color:var(--accent-ink)} .case-body{padding:clamp(28px,4vw,56px)} .case-kicker{font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:16px} .case-title{font-size:clamp(30px,4vw,52px);margin-bottom:8px} .case-ind{color:var(--ink-2);font-size:16.5px;margin-bottom:30px} .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:34px} .case-facts{border-top:1px solid var(--line)} .case-facts>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:15px} .case-facts dt{font-family:var(--font-d);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .case-facts dd{font-weight:600;text-align:right} .case-story p{color:var(--ink-2);font-size:16.5px;line-height:1.7;margin-bottom:16px} .case-story p:first-child{color:var(--ink);font-size:18px} .case-chips{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 30px} .case-chips span{font-family:var(--font-d);font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:8px 18px;color:var(--ink-2)} .case-actions{display:flex;gap:14px;flex-wrap:wrap} /* ============================================================ WHY RAO ============================================================ */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:56px;background:var(--surface)} .why-item{padding:40px 32px;border-left:1px solid var(--line);position:relative} .why-item:first-child{border-left:0} .why-item::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-deep); transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)} .why-item:hover::before{transform:scaleX(1)} .why-item:hover .why-num{color:var(--accent-strong)} .why-num{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--ink-3);display:block;margin-bottom:60px} .why-item h3{font-size:22px;margin-bottom:12px} .why-item p{font-size:15px;color:var(--ink-2);line-height:1.6} /* ============================================================ TRACK RECORD — full-bleed charcoal band ============================================================ */ .track{background:var(--char);color:var(--on-char);border-radius:34px;margin:0 var(--pad);padding:clamp(70px,7vw,110px) clamp(30px,5vw,80px);position:relative;overflow:hidden} .track .eyebrow{color:var(--on-char-2);position:relative} .track .eyebrow .e-idx{color:var(--on-char-3)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:54px;position:relative} .stat{border-left:1px solid var(--on-char-line);padding-left:30px} .stat:first-child{border-left:0;padding-left:0} .stat-num{font-family:var(--font-d);font-weight:700;font-size:clamp(48px,5.6vw,84px);letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:4px} .stat-num .suf{font-size:.5em;color:var(--accent);font-weight:600} .stat-label{margin-top:14px;font-family:var(--font-d);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-char-2)} .stat-sub{margin-top:8px;font-size:14px;color:var(--on-char-3)} /* ============================================================ MONTHLY PLANS — premium service offering, not a SaaS table ============================================================ */ .plans-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap} .plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:60px;align-items:stretch} .plan{ position:relative;border:1px solid var(--line);border-radius:24px;background:var(--surface); padding:44px 38px;display:flex;flex-direction:column;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s,border-color .4s,background .45s; } .plan:hover{transform:translateY(-8px);box-shadow:var(--shadow)} .plan-badge{ position:absolute;top:22px;right:22px; font-family:var(--font-d);font-size:11.5px;font-weight:700;letter-spacing:.2em; background:var(--accent);color:var(--accent-ink);padding:9px 18px;border-radius:999px; } .plan-name{font-family:var(--font-d);font-size:14px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)} .plan-price{display:flex;align-items:baseline;gap:8px;margin:20px 0 6px} .plan-price .cur{font-family:var(--font-d);font-size:22px;font-weight:600;color:var(--ink-3)} .plan-price .amt{font-family:var(--font-d);font-weight:700;font-size:clamp(52px,4.6vw,68px);letter-spacing:-.03em;line-height:1} .plan-price .per{font-family:var(--font-d);font-size:14px;color:var(--ink-3)} .plan-blurb{color:var(--ink-2);font-size:15.5px;margin-bottom:8px} .plan-rule{height:1px;background:var(--line);margin:26px 0} .plan-features{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:10px} .plan-features li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)} .plan-features li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l3 3 4.5-6' fill='none' stroke='%23171715' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat} .plan-rev{ margin-top:auto;padding-top:32px;font-size:13.5px;color:var(--ink-3);line-height:1.55; border-top:1px dashed var(--line); } .plan-rev b{color:var(--ink-2);font-weight:600} .plan .btn{margin-top:26px;justify-content:center} .plan-rec{background:var(--char);color:var(--on-char);border-color:var(--accent-deep); box-shadow:0 28px 64px -28px color-mix(in srgb,var(--accent-deep) 55%,transparent)} .plan-rec:hover{transform:translateY(-8px); box-shadow:0 34px 80px -30px color-mix(in srgb,var(--accent-deep) 60%,transparent),var(--shadow)} .plan-rec .plan-name{color:var(--on-char-2)} .plan-rec .plan-price .cur{color:var(--on-char-3)} .plan-rec .plan-price .per{color:var(--on-char-3)} .plan-rec .plan-blurb{color:var(--on-char-2)} .plan-rec .plan-rule{background:var(--on-char-line)} .plan-rec .plan-features li{color:var(--on-char-2)} .plan-rec .plan-rev{border-color:var(--on-char-line);color:var(--on-char-3)} .plan-rec .plan-rev b{color:var(--on-char-2)} .plan-rec .btn-primary{background:var(--accent);color:var(--accent-ink)} .plan-rec .btn-primary:hover{background:var(--on-char);color:var(--char)} .howwork{ margin-top:70px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); padding:clamp(30px,4vw,54px);display:grid;grid-template-columns:.9fr 1.4fr;gap:clamp(30px,4vw,70px); } .howwork h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px} .howwork .hw-sub{color:var(--ink-2);font-size:15.5px} .hw-list{list-style:none;display:flex;flex-direction:column} .hw-list li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-2)} .hw-list li:last-child{border-bottom:0} .hw-list .n{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:2px} .hw-list p{font-size:15px;color:var(--ink-2)} .hw-list p b{color:var(--ink);font-weight:700} /* ============================================================ PROJECT (one-time) SERVICES ============================================================ */ .oneoff{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .45s,border-color .45s} .oneoff-head{text-align:center;max-width:760px;margin:0 auto} .oneoff-head .eyebrow{justify-content:center} .oneoff-head .sec-title{margin-left:auto;margin-right:auto} .oneoff-head .sec-lead{margin-left:auto;margin-right:auto} .oneoff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px} .oneoff-item{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); padding:36px 32px;display:flex;flex-direction:column;gap:12px;min-height:250px; transition:transform .35s var(--ease),box-shadow .35s,background .45s,border-color .45s;position:relative;overflow:hidden; } .oneoff-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .oneoff-item .oo-idx{font-family:var(--font-d);font-size:12px;letter-spacing:.2em;color:var(--ink-3)} .oneoff-item h3{font-size:24px} .oneoff-item p{font-size:15px;color:var(--ink-2);flex:1} .oneoff-item .oo-price{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .oneoff-item .oo-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:15px;margin-top:6px} .oneoff-item .oo-link .arw{transition:transform .3s var(--ease)} .oneoff-item .oo-link:hover .arw{transform:translateX(5px)} .oneoff-item.feat{background:var(--char);color:var(--on-char);border-color:var(--char)} .oneoff-item.feat p{color:var(--on-char-2)} .oneoff-item.feat .oo-idx{color:var(--on-char-3)} .oneoff-item.feat .oo-price{color:var(--accent)} /* ============================================================ PROCESS — two tracks ============================================================ */ .proc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:56px} .proc-track{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:clamp(30px,3.4vw,48px);position:relative;overflow:hidden} .proc-track.dark{background:var(--char);color:var(--on-char);border-color:var(--char)} .proc-track h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px} .proc-track .pt-sub{font-size:15px;color:var(--ink-2);margin-bottom:30px} .proc-track.dark .pt-sub{color:var(--on-char-2)} .proc-steps{list-style:none;position:relative} .proc-steps::before{content:"";position:absolute;left:23px;top:12px;bottom:12px;width:2px;background:var(--line-2)} .proc-track.dark .proc-steps::before{background:var(--on-char-line)} .proc-steps li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px;padding:16px 0;align-items:start} .proc-steps .ps-n{ width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--bg); font-family:var(--font-d);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center; position:relative;z-index:1;transition:background .3s,color .3s,border-color .3s; } .proc-steps li:hover .ps-n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .proc-track.dark .ps-n{background:var(--char-2);border-color:var(--on-char-line);color:var(--on-char)} .proc-steps h4{font-size:18px;margin-bottom:4px} .proc-steps p{font-size:14.5px;color:var(--ink-2)} .proc-track.dark .proc-steps p{color:var(--on-char-2)} /* ============================================================ TESTIMONIALS → FIVERR CREDIBILITY BADGE ============================================================ */ .proof-band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .45s,border-color .45s} .fiverr-badge{ max-width:880px;margin:0 auto;text-align:center; border:1px solid var(--line);border-radius:30px;background:var(--surface); padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px);position:relative;overflow:hidden; box-shadow:var(--shadow-sm);transition:background .45s,border-color .45s; } .fb-stars{display:flex;justify-content:center;gap:10px;margin-bottom:20px;color:var(--accent-deep)} .fb-stars svg{width:26px;height:26px} .fb-score{font-family:var(--font-d);font-weight:700;font-size:clamp(72px,9vw,120px);letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:8px} .fb-score small{font-size:.32em;font-weight:600;color:var(--ink-3);letter-spacing:0} .fb-from{margin-top:14px;font-size:17px;color:var(--ink-2)} .fb-from b{color:var(--ink);font-weight:700} .fb-meta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-family:var(--font-d);font-size:13.5px;letter-spacing:.06em;color:var(--ink-2)} .fb-meta span{border:1px solid var(--line);border-radius:999px;padding:9px 20px} .fb-meta b{color:var(--ink);font-weight:700} .fiverr-badge .btn{margin-top:34px} /* Real testimonial cards (seeded from verified Fiverr reviews). */ .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:64px} .t-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:32px 30px;display:flex;flex-direction:column;gap:18px;transition:transform .35s var(--ease),box-shadow .35s,background .45s} .t-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)} .t-stars{display:flex;gap:6px;color:var(--accent-deep)} .t-stars svg{width:18px;height:18px} .t-quote{font-size:16.5px;line-height:1.7;color:var(--ink-2);flex:1} .t-person{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:20px} .t-avatar{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-d);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none} .t-name{font-family:var(--font-d);font-weight:600;font-size:15.5px} .t-meta{font-size:13px;color:var(--ink-3);margin-top:2px} @media(max-width:1020px){.t-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.t-grid{grid-template-columns:1fr}} /* ============================================================ ABOUT ============================================================ */ .about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,96px);align-items:start} .about-photo{position:relative} .photo-frame{ position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/4.7;background:linear-gradient(150deg,var(--surface-2),var(--bg-2)); display:flex;align-items:center;justify-content:center; } .photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .photo-mono{font-family:var(--font-d);font-weight:700;font-size:clamp(120px,14vw,200px);color:var(--line);letter-spacing:-.05em;user-select:none} .photo-frame .photo-tag{ position:absolute;left:18px;bottom:18px;z-index:2; font-family:var(--font-d);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px; } .photo-cap{margin-top:16px;font-family:var(--font-d);font-size:13.5px;color:var(--ink-3);letter-spacing:.04em;display:flex;justify-content:space-between;gap:12px} .about-story h2{font-size:clamp(34px,4.4vw,56px);margin-bottom:26px} .about-story p{color:var(--ink-2);font-size:17px;line-height:1.72;margin-bottom:18px;max-width:58ch} .about-story p strong{color:var(--ink);font-weight:600} .role-chips{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0} .role-chips span{font-family:var(--font-d);font-size:12.5px;font-weight:600;letter-spacing:.18em;border:1px solid var(--line);border-radius:999px;padding:10px 18px;color:var(--ink-2)} .about-loc{display:flex;align-items:center;gap:12px;font-family:var(--font-d);font-size:15px;font-weight:500;color:var(--ink-2);border-top:1px solid var(--line);padding-top:24px} .about-loc .pin{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none} .about-loc .pin svg{width:16px;height:16px;display:block} /* ============================================================ TOOLS — visual platform strip ============================================================ */ .tools-band{border-top:1px solid var(--line)} .tool-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px} .tool-group{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:36px 32px;transition:transform .35s var(--ease),box-shadow .35s,background .45s} .tool-group:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)} .tool-group h4{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px;display:flex;align-items:center;gap:12px} .tool-group h4::after{content:"";flex:1;height:1px;background:var(--line-2)} .tool-pills{display:flex;flex-wrap:wrap;gap:10px} .tool-pills span{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-d);font-size:14px;font-weight:500; background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:11px 16px;color:var(--ink-2); transition:border-color .3s,color .3s; } .tool-pills span:hover{border-color:var(--accent-deep);color:var(--ink)} .tool-pills .ti{width:9px;height:9px;border-radius:3px;background:var(--accent-deep);flex:none} /* ============================================================ FAQ — editorial accordion ============================================================ */ .faq-list{margin-top:52px;border-top:1px solid var(--line);max-width:980px} .faq-item{border-bottom:1px solid var(--line)} .faq-q{ width:100%;display:grid;grid-template-columns:64px 1fr 44px;gap:18px;align-items:center; padding:26px 6px;text-align:left;transition:padding .3s; } .faq-q:hover{padding-left:14px} .faq-n{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--ink-3)} .faq-q h3,.faq-q .faq-h{font-family:var(--font-d);font-size:clamp(18px,2vw,23px);font-weight:600;letter-spacing:-.015em;line-height:1.25} .faq-x{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;position:relative;flex:none;transition:background .3s,border-color .3s,transform .4s var(--ease)} .faq-x::before,.faq-x::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transition:background .3s} .faq-x::before{width:14px;height:2px;transform:translate(-50%,-50%)} .faq-x::after{width:2px;height:14px;transform:translate(-50%,-50%)} .faq-item.open .faq-x{background:var(--accent);border-color:var(--accent);transform:rotate(135deg)} .faq-item.open .faq-x::before,.faq-item.open .faq-x::after{background:var(--accent-ink)} .faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)} .faq-a-in{padding:0 6px 30px 82px;color:var(--ink-2);font-size:16px;line-height:1.7;max-width:72ch} /* ============================================================ FINAL CTA — charcoal full-bleed ============================================================ */ .final-cta{background:var(--char);color:var(--on-char);border-radius:34px;margin:0 var(--pad);text-align:center; padding:clamp(80px,9vw,140px) clamp(28px,6vw,80px);position:relative;overflow:hidden} .final-cta::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:50%;top:-320px;transform:translateX(-50%); background:radial-gradient(circle,rgba(124,58,237,.13),transparent 62%);pointer-events:none} .final-cta h2{font-size:clamp(38px,6vw,76px);max-width:16ch;margin:0 auto;position:relative} .final-cta h2 .per{color:var(--accent)} .final-cta p{color:var(--on-char-2);font-size:17.5px;max-width:56ch;margin:24px auto 0;position:relative} .final-cta .btn{margin-top:40px;position:relative} /* slim CTA band — final-cta styling at a smaller scale (sits after the portfolio grid) */ .cta-band{ background:var(--char);color:var(--on-char);border-radius:24px;margin:0 var(--pad); text-align:center;padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px); position:relative;overflow:hidden; } .cta-band::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;left:50%;top:-240px;transform:translateX(-50%); background:radial-gradient(circle,rgba(124,58,237,.13),transparent 62%);pointer-events:none} .cta-band h2{font-size:clamp(30px,4.4vw,52px);max-width:18ch;margin:0 auto;position:relative} .cta-band h2 .per{color:var(--accent)} .cta-band p{color:var(--on-char-2);font-size:16.5px;max-width:52ch;margin:18px auto 0;position:relative} .cta-band .btn{margin-top:32px;position:relative} /* ============================================================ CONTACT — 6-step intake wizard ============================================================ */ .contact-head{text-align:center;max-width:760px;margin:0 auto} .contact-head .eyebrow{justify-content:center} .contact-head .eyebrow::after{content:"";width:26px;height:2px;background:var(--accent-deep)} .contact-head .sec-title{margin-left:auto;margin-right:auto} .contact-head .sec-lead{margin-left:auto;margin-right:auto} .wizard{ max-width:860px;margin:56px auto 0;border:1px solid var(--line);border-radius:28px; background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden;transition:background .45s,border-color .45s; scroll-margin-top:90px; } .wiz-top{padding:30px clamp(24px,4vw,48px) 0} .wiz-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .wiz-count{font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)} .wiz-bar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden} .wiz-bar i{display:block;height:100%;width:0;background:linear-gradient(to right,var(--accent-deep),var(--accent));border-radius:3px;transition:width .55s var(--ease)} .wiz-body{padding:clamp(28px,4vw,48px);min-height:430px} .wiz-step{display:none} .wiz-step.on{display:block;animation:wizIn .5s var(--ease)} @keyframes wizIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .wiz-kicker{font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:12px} .wiz-step h3{font-size:clamp(24px,3vw,34px);margin-bottom:10px} .wiz-step .wz-sub{color:var(--ink-2);font-size:15.5px;margin-bottom:28px;max-width:52ch} .field{margin-bottom:20px} .field label{display:block;font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px} .field input,.field textarea,.field select{ width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md); padding:16px 18px;font-size:16px;transition:border-color .3s,box-shadow .3s,background .45s;outline:none; } .field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent-deep);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)} .field textarea{min-height:130px;resize:vertical} .f-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px} .chip-row{display:flex;flex-wrap:wrap;gap:12px} .chip{ font-family:var(--font-d);font-size:14.5px;font-weight:500; border:1.5px solid var(--line);border-radius:999px;padding:13px 24px;color:var(--ink-2); transition:all .25s var(--ease);background:transparent; } .chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)} .chip.sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .chip.sel:hover{color:var(--accent-ink)} /* chips wrapping real radio/checkbox inputs — keyboard-visible focus */ .chip:has(input){position:relative} .chip>input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .chip:has(input:focus-visible){outline:2px solid var(--accent-deep);outline-offset:3px} .wiz-qa{margin-bottom:22px} .wiz-qa>p{font-weight:600;font-size:16px;margin-bottom:12px} .wiz-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:0 clamp(24px,4vw,48px) clamp(28px,4vw,44px)} .wiz-micro{flex:1 1 100%;margin:8px 0 0;text-align:center;font-size:13px;color:var(--ink-3)} .wiz-fallback{margin:24px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2)} .wiz-fallback a{color:var(--accent-strong);font-weight:600;text-decoration:underline;text-underline-offset:3px} .wiz-review{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;margin-bottom:8px} .wiz-review>div{display:flex;justify-content:space-between;gap:18px;padding:14px 20px;border-bottom:1px solid var(--line-2);font-size:14.5px} .wiz-review>div:last-child{border-bottom:0} .wiz-review dt{font-family:var(--font-d);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);flex:none} .wiz-review dd{color:var(--ink);text-align:right;font-weight:500} .wiz-success{text-align:center;padding:20px 0} .wiz-success .ok{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--accent-ink); display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 26px;font-weight:700} .wiz-success h3{margin-bottom:12px} .wiz-success p{color:var(--ink-2);max-width:52ch;margin:0 auto 30px} .wiz-success .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .attach-note{margin-top:26px;border:1px dashed var(--line);border-radius:var(--r-md);padding:20px 22px;font-size:14.5px;color:var(--ink-2)} .attach-note strong{color:var(--ink);font-weight:700;display:block;margin-bottom:4px} /* wizard plan note — hidden by default, JS toggles style.display */ .plan-note{display:none;background:color-mix(in srgb,var(--accent) 15%,transparent); border:1px solid var(--accent);border-radius:10px;padding:13px 18px; font-size:14px;font-weight:600;line-height:1.55} /* ============================================================ FOOTER ============================================================ */ .site-footer{border-top:1px solid var(--line);padding:70px 0 34px;background:var(--surface);transition:background .45s,border-color .45s} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px} .foot-brand p{color:var(--ink-2);font-size:15px;margin-top:16px;max-width:32ch} .foot-col h4{font-family:var(--font-d);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px} .foot-col a,.foot-col button{font-size:15px;color:var(--ink-2);transition:color .25s;padding:0;text-align:left} .foot-col a:hover,.foot-col button:hover{color:var(--ink)} .foot-col a .arw,.foot-col button .arw{display:inline-block;transition:transform .3s var(--ease)} .foot-col a:hover .arw,.foot-col button:hover .arw{transform:translateX(5px)} .foot-bottom{border-top:1px solid var(--line-2);padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)} .foot-legal{display:flex;gap:8px} .foot-legal button{font-size:13.5px;color:var(--ink-3);transition:color .25s} .foot-legal button:hover{color:var(--ink)} /* ============================================================ RESPONSIVE — recomposed, not shrunk ============================================================ */ @media (max-width:1120px){ .why-grid{grid-template-columns:repeat(2,1fr)} .why-item:nth-child(3){border-left:0} .why-item{border-top:1px solid var(--line)} .why-item:nth-child(-n+2){border-top:0} .stats{grid-template-columns:repeat(2,1fr);gap:44px} .stat:nth-child(3){border-left:0;padding-left:0} .plan-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto} .oneoff-grid{grid-template-columns:repeat(2,1fr)} .howwork{grid-template-columns:1fr} .proc-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .hero-cols{grid-template-columns:1fr;gap:52px} .hero-media{justify-self:start;max-width:420px} } @media (max-width:900px){ .hero-frame img{aspect-ratio:4/3} } @media (max-width:900px){ .nav-links,.nav-cta .btn{display:none} .burger{display:flex} .mobile-menu{position:fixed;inset:0;z-index:950;background:var(--bg);display:flex;flex-direction:column; padding:110px var(--pad) 40px;gap:8px;transform:translateY(-102%);visibility:hidden;overflow-y:auto; transition:transform .55s var(--ease),visibility 0s linear .55s} .mobile-menu.open{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s} .mobile-menu a{font-family:var(--font-d);font-size:clamp(30px,8vw,44px);font-weight:600;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center} .mobile-menu a .arw{color:var(--accent-strong)} .mobile-menu .btn{margin-top:26px;justify-content:center} body.menu-open{overflow:hidden} body.menu-open .burger i:first-child{transform:translateY(8px) rotate(45deg)} body.menu-open .burger i:last-child{transform:translateY(-8px) rotate(-45deg)} .wwd-grid{grid-template-columns:1fr;border-top:0} .wwd-item{border-left:0;border-top:1px solid var(--line);padding:34px 0} .wwd-item::after{left:0} .wwd-item:hover::after,.wwd-item:first-child:hover::after{width:100%} .work-grid{grid-template-columns:1fr} .proj,.proj.span-7,.proj.span-5{grid-column:1/-1} .proj.offset{margin-top:0} .case-grid{grid-template-columns:1fr} .about-grid{grid-template-columns:1fr} .photo-frame{aspect-ratio:4/3.4} .tool-groups{grid-template-columns:1fr} .track{margin:0 12px;border-radius:24px} .final-cta{margin:0 12px;border-radius:24px} .faq-a-in{padding-left:0} .faq-q{grid-template-columns:1fr 44px} .faq-n{display:none} /* section header variants stack on small screens */ .sec-head.sec-split{grid-template-columns:1fr;align-items:start} .sec-head.sec-index-xl .e-idx{font-size:clamp(72px,22vw,120px)} } /* 390px — fully recomposed */ @media (max-width:480px){ :root{--sec:72px} body{font-size:16px} #faq{padding-bottom:88px} .hero{padding-top:120px} .hero-title{font-size:clamp(58px,17.5vw,76px)} .hero-ctas .btn{flex:1;justify-content:center;padding:16px 18px} .trust-in{flex-direction:column;align-items:flex-start;gap:14px} .why-grid{grid-template-columns:1fr} .why-item{border-left:0!important;border-top:1px solid var(--line)!important;padding:30px 24px} .why-item:first-child{border-top:0!important} .why-num{margin-bottom:26px} .stats{grid-template-columns:1fr 1fr;gap:30px} .stat{padding-left:18px} .stat-num{font-size:44px} .plan{padding:34px 26px} .oneoff-grid{grid-template-columns:1fr} .f-2col{grid-template-columns:1fr} .wiz-body{min-height:0;padding:24px 20px} .wiz-nav{padding:0 20px 24px;flex-direction:column-reverse} .wiz-nav .btn{justify-content:center} .chip{padding:12px 18px;font-size:14px} .foot-grid{grid-template-columns:1fr;gap:30px} .case-body{padding:24px 20px} /* shot-view becomes a small static label under the image (card is already a link) */ .proj-shot{aspect-ratio:auto} .proj-shot .mock{position:relative;inset:auto;aspect-ratio:16/10.5} .proj-shot>img{position:relative;inset:auto;height:auto;aspect-ratio:16/10.5} .shot-view{position:static;opacity:1;transform:none;display:inline-block;margin:12px 14px 16px;padding:10px 18px;font-size:12.5px} } /* ---------- dark-mode refinements ---------- */ [data-theme="dark"] .trust{background:var(--surface)} [data-theme="dark"] .photo-mono{color:var(--char-3)} [data-theme="dark"] .oneoff{background:var(--bg-2)} [data-theme="dark"] .proof-band{background:var(--bg-2)} [data-theme="dark"] .site-footer{background:var(--surface)} [data-theme="dark"] .plan{background:var(--surface)} /* recommended plan becomes the accent card in dark mode */ [data-theme="dark"] .plan-rec{background:var(--accent);border-color:var(--accent);color:var(--accent-ink); box-shadow:0 28px 64px -28px color-mix(in srgb,var(--accent) 55%,transparent)} [data-theme="dark"] .plan-rec:hover{box-shadow:0 34px 80px -30px color-mix(in srgb,var(--accent) 60%,transparent)} [data-theme="dark"] .plan-rec .plan-name{color:var(--accent-ink)} [data-theme="dark"] .plan-rec .plan-price .cur,[data-theme="dark"] .plan-rec .plan-price .per{color:var(--accent-ink);opacity:.65} [data-theme="dark"] .plan-rec .plan-blurb{color:var(--accent-ink);opacity:.85} [data-theme="dark"] .plan-rec .plan-rule{background:color-mix(in srgb,var(--accent-ink) 18%,transparent)} [data-theme="dark"] .plan-rec .plan-features li{color:var(--accent-ink)} [data-theme="dark"] .plan-rec .plan-features li::before{background-color:var(--accent-ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l3 3 4.5-6' fill='none' stroke='%23A78BFA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} [data-theme="dark"] .plan-rec .plan-rev{border-color:color-mix(in srgb,var(--accent-ink) 25%,transparent);color:var(--accent-ink);opacity:.8} [data-theme="dark"] .plan-rec .plan-rev b{color:var(--accent-ink)} [data-theme="dark"] .plan-rec .plan-badge{background:var(--accent-ink);color:var(--accent)} [data-theme="dark"] .plan-rec .btn-primary{background:var(--accent-ink);color:var(--accent)} [data-theme="dark"] .plan-rec .btn-primary:hover{background:var(--accent-ink);color:var(--accent)} [data-theme="dark"] .btn-primary{background:var(--ink);color:#121210} [data-theme="dark"] .btn-primary:hover{background:var(--accent);color:var(--accent-ink)} /* thin scrollbars for modal */ .case-card::-webkit-scrollbar{width:10px} .case-card::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px} .case-card::-webkit-scrollbar-track{background:transparent} /* ============================================================ RAO THEME — port adjustments (additive; prototype parity) 1. The prototype defines .mobile-menu only inside the 900px media query — hide it on desktop so it can't render inline. 2. wp_nav_menu renders