/*
Theme Name: Resvond Editorial Signal
Theme URI: https://resvond.com
Author: Resvond
Description: Black-and-yellow Editorial Signal theme for Elementor and Hyderabad-focused digital marketing services.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: resvond-elementor
*/

:root { --yellow:#FFD21F; --ink:#101010; --paper:#F8F7F2; --line:#d8d6cc; --muted:#6b6a62; --soft:#ecebe4; --radius:0px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Space Grotesk',sans-serif; }
button,a,input,textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
.site-shell { position:relative; overflow:hidden; background:var(--paper); }
.rail-overlay { position:absolute; inset:0; pointer-events:none; z-index:10; display:grid; grid-template-columns:repeat(4,1fr); gap:0; opacity:.72; }
.rail-overlay span { border-right:1px solid rgba(255,255,255,.72); }
.site-header { position:absolute; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:24px clamp(20px,4vw,64px); color:#fff; }
.brand-lockup { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700; letter-spacing:.15em; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; background:var(--yellow); }
.brand-mark img { width:24px; height:24px; object-fit:contain; mix-blend-mode:multiply; }
.main-nav { display:flex; gap:32px; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.main-nav a,.footer-nav a { transition:color .18s ease; }
.main-nav a:hover,.footer-nav a:hover { color:var(--yellow); }
.header-actions { display:flex; gap:12px; }
.icon-button { border:0; background:transparent; color:inherit; padding:5px; }
.hero-section { min-height:860px; position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; padding:150px clamp(20px,7vw,110px) 72px; background:var(--ink); color:#fff; }
.hero-watermark { position:absolute; top:102px; left:3vw; font-size:clamp(90px,18vw,280px); line-height:.78; font-weight:700; letter-spacing:-.1em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.32); pointer-events:none; }
.hero-copy { position:relative; z-index:2; max-width:630px; }
.eyebrow { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; margin:0 0 22px; color:var(--yellow); text-transform:uppercase; }
.eyebrow.dark { color:var(--ink); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(64px,9vw,138px); line-height:.84; letter-spacing:-.09em; margin:0 0 28px; font-weight:700; }
h1 em,h2 span { color:var(--yellow); font-style:normal; }
h1 span { display:block; font-size:.52em; letter-spacing:-.07em; margin-top:20px; }
h1 b { -webkit-text-stroke:1px var(--yellow); color:transparent; }
.hero-description { max-width:420px; color:#d4d4ce; font-size:15px; line-height:1.65; }
.hero-cta-row { display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
.yellow-button,.black-button,.outline-button { display:inline-flex; align-items:center; gap:12px; padding:14px 19px; border:1px solid var(--yellow); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; transition:transform .18s ease,background .18s ease,color .18s ease; }
.yellow-button { background:var(--yellow); color:var(--ink); }
.yellow-button:hover { transform:translateY(-3px); background:#fff; border-color:#fff; }
.black-button { background:var(--ink); color:#fff; border-color:var(--ink); }
.black-button:hover { background:var(--yellow); color:var(--ink); }
.outline-button { background:transparent; color:var(--ink); border-color:var(--ink); }
.outline-button:hover { background:var(--ink); color:#fff; }
.text-link { font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; border-bottom:1px solid var(--yellow); padding-bottom:7px; }
.hero-visual { position:relative; align-self:stretch; min-height:600px; display:flex; justify-content:center; align-items:flex-end; }
.hero-visual img { width:min(100%,560px); height:100%; max-height:660px; object-fit:cover; object-position:center; filter:contrast(1.04); mix-blend-mode:screen; }
.rec-tag,.hero-note { position:absolute; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; }
.rec-tag { top:12%; right:5%; border:1px solid rgba(255,255,255,.45); padding:9px 10px; }
.rec-dot { width:7px; height:7px; border-radius:50%; background:#ff5a4f; display:inline-block; margin-right:7px; }
.hero-note { bottom:15%; right:-2%; color:var(--yellow); transform:rotate(-90deg); transform-origin:right bottom; }
.play-stamp { position:absolute; left:5%; bottom:13%; width:102px; height:102px; border:1px solid rgba(255,255,255,.7); border-radius:50%; display:grid; place-items:center; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.12em; transform:rotate(-14deg); }
.play-stamp svg { position:absolute; top:16px; }
.play-stamp span { padding-top:37px; }
.hero-footer { position:absolute; bottom:23px; left:clamp(20px,7vw,110px); right:clamp(20px,7vw,110px); display:flex; justify-content:space-between; color:#aaa99e; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.12em; }
.ticker-stack { position:relative; z-index:5; }
.ticker { overflow:hidden; display:flex; white-space:nowrap; gap:24px; padding:12px 0; font-size:18px; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; }
.ticker span { animation:marquee 24s linear infinite; }
.ticker b { color:var(--ink); }
.ticker-white { background:#fff; color:var(--ink); }
.ticker-yellow { background:var(--yellow); color:var(--ink); }
@keyframes marquee { to { transform:translateX(-100%); } }
.section { padding:130px clamp(20px,7vw,110px); position:relative; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:42px; margin-bottom:65px; }
h2 { font-size:clamp(46px,6.5vw,94px); line-height:.91; letter-spacing:-.08em; margin-bottom:0; }
.section-intro { max-width:320px; color:var(--muted); line-height:1.7; font-size:14px; margin-bottom:8px; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; max-width:930px; }
.service-card { min-height:250px; border:1px solid var(--line); padding:27px; display:flex; flex-direction:column; justify-content:space-between; transition:background .2s ease,transform .2s ease; }
.service-card:hover { background:var(--yellow); transform:translateY(-4px); }
.service-top { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; color:var(--muted); }
.service-card:hover .service-top { color:var(--ink); }
.service-number { font-size:11px; }
.service-card h3 { font-size:27px; letter-spacing:-.06em; margin:22px 0 8px; }
.service-card p { color:var(--muted); max-width:360px; font-size:13px; line-height:1.6; }
.service-card:hover p { color:var(--ink); }
.service-card a { display:flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; font-size:10px; }
.trust-strip { padding:60px clamp(20px,7vw,110px); background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.trust-strip p { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em; }
.trust-words { display:flex; justify-content:space-between; gap:20px; margin-top:30px; font-size:clamp(20px,3vw,40px); font-weight:700; letter-spacing:-.06em; }
.about-section { background:var(--yellow); display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,120px); align-items:center; }
.about-art { min-height:560px; position:relative; display:grid; place-items:center; }
.about-grid-label { position:absolute; top:0; left:0; font-family:'IBM Plex Mono',monospace; font-size:10px; }
.portrait-frame { width:min(80%,440px); height:540px; overflow:hidden; background:var(--ink); clip-path:polygon(0 10%,100% 0,92% 100%,7% 94%); }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.15); mix-blend-mode:screen; }
.float-card { position:absolute; background:#fff; border:1px solid var(--ink); padding:13px; box-shadow:6px 6px 0 var(--ink); font-family:'IBM Plex Mono',monospace; font-size:9px; }
.float-card span { display:block; color:var(--muted); margin-bottom:8px; }
.card-one { right:2%; top:26%; transform:rotate(4deg); }
.card-two { left:4%; bottom:16%; transform:rotate(-5deg); }
.about-copy > p:not(.eyebrow) { max-width:520px; color:#292820; line-height:1.7; margin:30px 0; }
.stat-row { display:flex; gap:30px; margin:36px 0; }
.stat-row div { display:flex; flex-direction:column; gap:6px; border-left:1px solid var(--ink); padding-left:12px; }
.stat-row strong { font-size:29px; }
.stat-row span { font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; }
.work-section { background:var(--paper); }
.work-list { display:grid; gap:70px; }
.work-card { display:grid; grid-template-columns:1.35fr .65fr; gap:42px; align-items:center; }
.work-card:nth-child(even) { grid-template-columns:.65fr 1.35fr; }
.work-card:nth-child(even) .work-image { order:2; }
.work-image { position:relative; height:420px; overflow:hidden; background:var(--ink); }
.work-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.23,1,.32,1); }
.work-card:hover .work-image img { transform:scale(1.04); }
.work-index { position:absolute; top:15px; left:15px; background:var(--yellow); padding:8px 11px; font-family:'IBM Plex Mono',monospace; font-size:11px; }
.work-meta p:first-child { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; }
.work-meta h3 { font-size:clamp(30px,4vw,57px); line-height:.94; letter-spacing:-.07em; margin:20px 0; }
.work-text { color:var(--muted); line-height:1.65; font-size:14px; }
.work-meta a { display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:8px; width:max-content; margin-top:26px; }
.testimonial-section { background:var(--ink); color:#fff; padding:130px clamp(20px,17vw,240px); text-align:center; position:relative; }
.testimonial-mark { color:var(--yellow); font-size:140px; line-height:.5; font-family:Georgia,serif; }
.testimonial-section blockquote { font-size:clamp(38px,5.8vw,82px); line-height:.94; letter-spacing:-.08em; margin:25px 0 30px; }
.testimonial-caption { color:#bab9af; max-width:400px; margin:0 auto; line-height:1.6; font-size:14px; }
.contact-section { background:var(--yellow); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,10vw,150px); padding:120px clamp(20px,7vw,110px); }
.contact-copy h2 { margin-bottom:30px; }
.contact-copy > p:not(.eyebrow) { max-width:390px; line-height:1.65; }
.contact-details { margin-top:50px; display:flex; flex-direction:column; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.contact-details a { border-bottom:1px solid var(--ink); width:max-content; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:23px; align-content:start; }
.contact-form label { display:flex; flex-direction:column; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4),.form-button,.form-success { grid-column:1 / -1; }
.contact-form input,.contact-form textarea { border:0; border-bottom:1px solid var(--ink); background:transparent; outline:0; padding:11px 0; font-family:'Space Grotesk',sans-serif; font-size:17px; text-transform:none; letter-spacing:0; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-bottom-width:2px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#6e6a46; }
.form-button { width:max-content; border-color:var(--ink); margin-top:14px; }
.form-button:hover { background:#fff; border-color:#fff; }
.form-success { display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11px; margin:0; }
.site-footer { background:var(--ink); color:#fff; padding:62px clamp(20px,7vw,110px); display:grid; grid-template-columns:1.4fr .6fr .8fr; gap:50px; }
.footer-brand p { max-width:260px; color:#aaa99e; font-size:13px; line-height:1.6; margin-top:20px; }
.footer-nav { display:flex; flex-direction:column; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:11px; }
.footer-nav span:first-child { color:var(--yellow); margin-bottom:8px; }
.footer-nav span:last-child { color:#aaa99e; margin-top:16px; }
@media (max-width:800px) { .site-header { padding:18px 20px; } .main-nav { display:none; position:absolute; top:70px; left:20px; right:20px; background:var(--ink); border:1px solid #494949; padding:20px; flex-direction:column; gap:18px; } .main-nav.is-open { display:flex; } .hero-section { grid-template-columns:1fr; min-height:940px; padding-top:145px; } .hero-visual { min-height:390px; margin-top:26px; } .hero-visual img { max-height:460px; width:76%; margin-left:auto; } .hero-note { right:0; } .hero-footer span:nth-child(2),.hero-footer span:nth-child(3) { display:none; } .section { padding-top:90px; padding-bottom:90px; } .section-heading,.about-section,.contact-section { grid-template-columns:1fr; display:grid; } .section-heading { align-items:start; margin-bottom:40px; } .services-grid { grid-template-columns:1fr; } .trust-words { flex-wrap:wrap; justify-content:center; } .about-art { min-height:470px; } .portrait-frame { height:440px; } .work-card,.work-card:nth-child(even) { grid-template-columns:1fr; gap:25px; } .work-card:nth-child(even) .work-image { order:0; } .work-image { height:280px; } .contact-section { gap:45px; } .site-footer { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1 / -1; } }
@media (max-width:520px) { h1 { font-size:64px; } h2 { font-size:48px; } .hero-section { min-height:880px; } .hero-description { font-size:14px; } .hero-footer { font-size:8px; } .hero-footer span:last-child { display:none; } .contact-form { grid-template-columns:1fr; } .contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4),.form-button,.form-success { grid-column:auto; } .site-footer { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }