/* Theme Name: Incredible India Films Theme URI: https://incredibleindiafilms.com Author: Incredible India Films Author URI: https://incredibleindiafilms.com Description: Cinematic dark-mode production-house theme for Incredible India Films. Converted as-is from the static prototype — same design, same interactions, same content, now running on WordPress. Version: 1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: iif */ /* ============================================================ FRAME. — Production Agency — Concept Prototype Design system: cinematic dark (hero/portfolio) blended with clean kinetic-editorial (about/services) sections. ============================================================ */ /* Inter is loaded via tags in each page's for reliable delivery — see index.html etc. */ @import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap'); :root{ --ink:#0a0a0a; --ink-2:#141414; --paper:#f4f2ec; --paper-2:#eae7dd; --off:#f2f0eb; --dim:#8a887f; --dim-dark:#7a7a7a; --accent:#f4801e; /* sampled from the Incredible India Films logo (was lime/green) */ --accent-2:#ff5b3d; --line:rgba(255,255,255,.14); --line-dark:rgba(10,10,10,.12); --ease:cubic-bezier(.16,.84,.24,1); --dur:.7s; --nav-h:84px; /* Headline typeface — Clash Display, falling back to Bebas Neue/system if it ever fails to load */ --font-display:'Clash Display','Bebas Neue',Impact,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--ink); color:var(--off); overflow-x:hidden; cursor:none; } @media (max-width:900px){ body{cursor:auto;} } a{color:inherit;text-decoration:none;} ul{list-style:none;} img{display:block;max-width:100%;} button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;} .wrap{max-width:1360px;margin:0 auto;padding:0 48px;} @media (max-width:700px){.wrap{padding:0 24px;}} .display{ font-family:var(--font-display); letter-spacing:-.01em; line-height:.98; font-weight:600; text-transform:uppercase; } .eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:500; display:flex;align-items:center;gap:10px; } .eyebrow::before{content:'';width:26px;height:1px;background:var(--accent);} ::selection{background:var(--accent);color:var(--ink);} /* ---------------- custom cursor ---------------- */ .cursor{ position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%; background:var(--accent);pointer-events:none;z-index:9999; transform:translate(-50%,-50%);mix-blend-mode:difference; transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease); } .cursor.grow{width:64px;height:64px;background:var(--off);} @media (max-width:900px){.cursor{display:none;}} /* ---------------- grain overlay ---------------- */ .grain{ position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------- progress bar ---------------- */ .progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:9998;width:0%;} /* ---------------- nav ---------------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:500; height:var(--nav-h);display:flex;align-items:center; padding:0 48px;transition:background .4s var(--ease),border-color .4s var(--ease); border-bottom:1px solid transparent; } @media (max-width:700px){.nav{padding:0 24px;}} .nav.solid{background:rgba(10,10,10,.82);backdrop-filter:blur(14px);border-color:var(--line);} .nav-row{width:100%;display:flex;align-items:center;justify-content:space-between;max-width:1360px;margin:0 auto;} .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:.02em;} .logo span{color:var(--accent);} .logo-mark{height:56px;width:auto;display:block;flex-shrink:0;} .logo-text{font-size:14px;line-height:1.15;letter-spacing:.005em;max-width:150px;} @media (max-width:1100px){.logo-text{display:none;}} .footer-brand{display:flex;align-items:center;gap:8px;} .footer-brand img{height:30px;width:auto;display:block;} .nav-links{display:flex;gap:38px;font-size:14px;letter-spacing:.02em;} .nav-links a{position:relative;padding:4px 0;color:var(--off);opacity:.8;transition:opacity .3s;} .nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .35s var(--ease);} .nav-links a:hover,.nav-links a.active{opacity:1;} .nav-links a:hover::after,.nav-links a.active::after{width:100%;} .nav-cta{ border:1px solid var(--line);padding:10px 22px;border-radius:100px;font-size:13px; display:flex;align-items:center;gap:8px;transition:background .3s,border-color .3s; } .nav-cta:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);} .nav-burger{display:none;} @media (max-width:900px){ .nav-links{display:none;} .nav-cta{display:none;} } /* ---------------- section theming ---------------- */ .section{position:relative;padding:150px 0;} .section--tight{padding:100px 0;} /* section 3 of 3 (homepage intro) — hard-capped to exactly one screen, content vertically centered */ .section--full{height:100vh;min-height:560px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) 0 40px;} @media (max-width:700px){.section--full{height:auto;min-height:100vh;overflow:visible;padding:calc(var(--nav-h) + 40px) 0 60px;}} .section--dark{background:var(--ink);color:var(--off);} .section--dark-2{background:var(--ink-2);color:var(--off);} .section--light{background:var(--paper);color:var(--ink);} .section--light .eyebrow{color:var(--accent-2);} .section--light .eyebrow::before{background:var(--accent-2);} /* ---------------- footer ---------------- */ .footer{background:var(--ink);border-top:1px solid var(--line);padding:90px 0 30px;} .footer-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:40px;padding-bottom:70px;} .footer-big{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-size:clamp(48px,9vw,140px);line-height:.92;} .footer-cols{display:flex;gap:80px;flex-wrap:wrap;} .footer-col h4{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;} .footer-col a{display:block;font-size:15px;padding:6px 0;opacity:.85;} .footer-col a:hover{opacity:1;color:var(--accent);} .footer-bottom{display:flex;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);flex-wrap:wrap;gap:10px;} /* ---------------- buttons ---------------- */ .btn{ display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:100px; font-size:14px;letter-spacing:.02em;font-weight:500; background:var(--accent);color:var(--ink);transition:transform .35s var(--ease),background .3s; } .btn:hover{transform:translateY(-3px);} .btn-outline{background:transparent;border:1px solid var(--line);color:var(--off);} .section--light .btn-outline{border-color:var(--line-dark);color:var(--ink);} .btn-outline:hover{background:var(--off);color:var(--ink);} .section--light .btn-outline:hover{background:var(--ink);color:var(--off);} .btn-arrow{transition:transform .35s var(--ease);} .btn:hover .btn-arrow{transform:translateX(5px);} /* ---------------- accessibility: visible keyboard focus ---------------- */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.idx-item:focus-visible,.filter-btn:focus-visible{ outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px; } /* ---------------- reveal ---------------- */ .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);} .reveal.in{opacity:1;transform:translateY(0);} .reveal-mask{overflow:hidden;} .reveal-mask > *{display:block;transform:translateY(110%);transition:transform .9s var(--ease);} .reveal-mask.in > *{transform:translateY(0);} /* ================= HOME ================= */ .hero{ min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:flex-end; padding-top:var(--nav-h);overflow:hidden;background:var(--ink); } .hero-bg{position:absolute;inset:0;z-index:0;} .hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.5;} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.35) 40%,var(--ink) 96%);} .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0;animation:float 18s ease-in-out infinite;} .blob-1{width:520px;height:520px;background:radial-gradient(circle,var(--accent),transparent 70%);top:-160px;right:-120px;animation-delay:0s;} .blob-2{width:420px;height:420px;background:radial-gradient(circle,var(--accent-2),transparent 70%);bottom:-140px;left:-100px;animation-delay:-6s;opacity:.35;} @keyframes float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,40px) scale(1.08);}} .hero-content{position:relative;z-index:2;padding:64px 0 52px;} .hero-tag{display:flex;align-items:center;gap:10px;margin-bottom:22px;} .hero-title{font-size:clamp(48px,8.4vw,134px);} .hero-title .line{overflow:hidden;} .hero-title .line span{display:block;transform:translateY(105%);animation:up .9s var(--ease) forwards;} .hero-title .line:nth-child(1) span{animation-delay:.1s;} .hero-title .line:nth-child(2) span{animation-delay:.22s;color:var(--accent);} .hero-title .line:nth-child(3) span{animation-delay:.34s;} @keyframes up{to{transform:translateY(0);}} .hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:28px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;} .hero-sub p{max-width:420px;color:var(--dim);font-size:16px;line-height:1.6;} .hero-stats{display:flex;gap:44px;} .hero-stats .stat b{font-family:var(--font-display);font-weight:600;font-size:34px;display:block;color:var(--accent);} .hero-stats .stat span{font-size:12px;color:var(--dim);letter-spacing:.05em;} /* fix: lime is unreadable on the light/paper section — swap to the darker accent there */ .section--light .hero-stats .stat b{color:var(--accent-2);} .scroll-cue{position:absolute;bottom:26px;right:48px;z-index:2;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;color:var(--dim);} .scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);display:block;animation:scrolldown 1.8s infinite;} @keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}} /* ---------------- idx hero — headline centered over a full-bleed autoplaying carousel ---------------- */ /* section 1 of 3 — one screen: background carousel fills it, copy is centered on top */ .idx-hero{ height:100vh;min-height:560px; position:relative; display:flex;align-items:center;justify-content:center; overflow:hidden;background:#000; } .idx-bg{position:absolute;inset:0;z-index:0;} .idx-slide{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transform:scale(1.08);transition:opacity 1.2s ease;filter:saturate(1.1) contrast(1.05); } .idx-slide.active{opacity:1;animation:idxkb 10s ease-in-out forwards;} @keyframes idxkb{from{transform:scale(1.08);}to{transform:scale(1);}} .idx-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(ellipse 65% 60% at 50% 48%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.1) 100%), linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.18) 28%,rgba(0,0,0,.18) 66%,rgba(0,0,0,.68) 100%); } .idx-expand{ position:absolute;top:calc(var(--nav-h) + 24px);right:24px;z-index:4;width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,.1);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center; color:#fff;transition:background .3s; } .idx-expand:hover{background:rgba(255,255,255,.24);} .idx-hero .hero-content{position:relative;z-index:2;text-align:center;padding:calc(var(--nav-h) + 10px) 24px 40px;max-width:900px;} .idx-hero .hero-title{text-align:center;} .idx-hero .hero-tag{justify-content:center;margin-bottom:16px;} .idx-hero .hero-sub{flex-direction:column;align-items:center;justify-content:center;text-align:center;border-top:none;padding-top:0;margin-top:26px;gap:22px;} .idx-hero .hero-sub p{max-width:520px;} .idx-counter{ position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3; display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.5); } .idx-counter #idxCurrent{color:#fff;font-weight:500;} .idx-counter i{position:relative;display:block;width:150px;height:1px;background:rgba(255,255,255,.22);} .idx-counter i b{position:absolute;top:50%;left:0%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:left .5s var(--ease);} @media (max-width:700px){ .idx-hero{height:auto;min-height:100vh;} .idx-hero .hero-content{padding-top:calc(var(--nav-h) + 40px);} } /* marquee — section 2 of 3, a full-screen client-logo wall between hero and intro */ .marquee-wrap{ border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);overflow:hidden; height:100vh;min-height:520px; display:flex;flex-direction:column;justify-content:center;gap:56px;padding:34px 0; } .marquee-head{text-align:center;padding:0 24px;} .marquee-statement{ font-family:var(--font-display);font-weight:600;text-transform:uppercase; font-size:clamp(34px,5.4vw,78px);line-height:1.04;letter-spacing:-.01em;color:var(--off);margin-top:16px; } @media (max-width:700px){.marquee-wrap{gap:34px;}} .marquee{display:flex;width:max-content;animation:scroll 32s linear infinite;} .marquee--rev{animation-direction:reverse;} .marquee:hover{animation-play-state:paused;} .marquee span{ font-family:var(--font-display);font-weight:600;font-size:36px;color:var(--off);opacity:.45;padding:0 46px;white-space:nowrap; display:flex;align-items:center;gap:46px;transition:opacity .3s; } .marquee span:hover{opacity:.9;} .marquee span::after{content:'✦';font-family:sans-serif;font-size:14px;color:var(--accent);opacity:1;} .marquee span img{height:38px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.85;} .marquee span em{font-style:normal;display:none;} @media (max-width:700px){.marquee span img{height:26px;}.marquee span{font-size:24px;padding:0 28px;gap:28px;}} @keyframes scroll{to{transform:translateX(-50%);}} /* intro / capabilities (light bridge) */ .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start;} @media (max-width:900px){.intro-grid{grid-template-columns:1fr;gap:40px;}} .intro-grid h2{font-size:clamp(30px,4vw,50px);line-height:1.15;} .intro-grid h2 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2);} .cap-list{display:flex;flex-direction:column;} .cap-item{padding:26px 0;border-bottom:1px solid var(--line-dark);display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;transition:padding-left .3s var(--ease);} .section--dark .cap-item,.section--dark-2 .cap-item{border-bottom-color:var(--line);} .cap-item:hover{padding-left:12px;} .cap-item b{font-size:19px;font-weight:500;} .cap-item span{font-size:13px;color:var(--dim);} .cap-num{font-size:12px;color:var(--dim);width:26px;} /* showcase head (sits above the pinned gallery) */ .showcase-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;} .floatgal-head-section{padding-bottom:20px;} /* scroll-scrubbed floating gallery — fixed centerpiece, images drift continuously past it */ .floatgal{position:relative;background:var(--ink);} .floatgal-track{height:420vh;position:relative;} .floatgal-sticky{ position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden; display:flex;align-items:center;justify-content:center; } /* the fixed text — deliberately untouched by scroll JS */ .floatgal-fixed{position:relative;z-index:3;text-align:center;pointer-events:none;} .floatgal-title{ font-family:var(--font-display);font-weight:600;text-transform:uppercase; font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-.01em;color:#fff; } .floatgal-tag{ font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;color:var(--dim); margin-top:22px; } .floatgal-counter{ margin:22px auto 0;width:150px;display:flex;align-items:center;gap:14px; font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.5); } .floatgal-counter #fgCurrent{color:#fff;font-weight:500;} .floatgal-counter i{position:relative;display:block;flex:1;height:1px;background:rgba(255,255,255,.22);} .floatgal-counter i b{position:absolute;top:50%;left:0%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);transition:left .2s linear;} .floatgal-img{ position:absolute;top:50%;left:50%;width:min(25vw,340px);aspect-ratio:4/5; border-radius:18px;overflow:hidden;will-change:transform,opacity,filter;z-index:4; box-shadow:0 24px 60px rgba(0,0,0,.5); } .floatgal-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05);} .floatgal-cap{ position:absolute;left:0;right:0;bottom:0;padding:18px;z-index:2;opacity:0;transform:translateY(8px); transition:opacity .3s ease,transform .3s ease; background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0) 65%); } .floatgal-cap.in{opacity:1;transform:translateY(0);} .floatgal-cap span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);} .floatgal-cap h3{font-family:var(--font-display);font-weight:600;font-size:16px;margin-top:4px;color:#fff;line-height:1.15;} @media (max-width:900px){ .floatgal-track{height:320vh;} .floatgal-img{width:38vw;} .floatgal-cap{padding:12px;} .floatgal-cap h3{font-size:13px;} } /* testimonials — compact ticker strip, not a full section */ .quote-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);padding:34px 0;overflow:hidden;} .quote-strip-label{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:22px;} .quote-strip-label .small-cap{max-width:420px;} .quote-track{overflow:hidden;} .quote-row{display:flex;width:max-content;animation:scroll 42s linear infinite;gap:0;} .quote-card{width:380px;flex-shrink:0;padding:0 30px;border-right:1px solid var(--line);} .quote-card p{font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;line-height:1.4;font-weight:400;} .quote-card .who{margin-top:14px;display:flex;gap:12px;align-items:center;font-size:12px;color:var(--dim);} .quote-card .who b{color:var(--off);font-weight:500;} .quote-card.is-placeholder{opacity:.45;} .quote-card.is-placeholder p{font-style:normal;font-family:'Inter';font-size:13.5px;} .quote-card.is-placeholder .who{opacity:.7;} /* CTA banded */ .cta-band{padding:150px 0;text-align:center;position:relative;overflow:hidden;} .cta-band h2{font-size:clamp(44px,9vw,120px);} .cta-band .btn{margin-top:40px;} /* ================= ABOUT ================= */ .page-head{padding:calc(var(--nav-h) + 90px) 0 60px;} .page-head .display{font-size:clamp(46px,8vw,110px);} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line);padding-top:50px;margin-top:70px;} @media (max-width:800px){.stat-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.stat-grid{grid-template-columns:1fr;}} .stat-grid .stat b{font-family:var(--font-display);font-weight:600;font-size:50px;display:block;} .stat-grid .stat span{font-size:13px;color:var(--dim);} .kinetic{font-size:clamp(26px,4.6vw,54px);line-height:1.3;font-weight:400;max-width:1100px;} .kinetic .hl{ position:relative;color:var(--accent-2);border-bottom:2px solid currentColor;cursor:pointer; } .kinetic .hl .note{ position:absolute;left:0;top:110%;width:280px;background:var(--ink);color:var(--off); padding:16px 18px;border-radius:12px;font-size:14px;line-height:1.5;font-weight:400; opacity:0;visibility:hidden;transform:translateY(6px);transition:all .3s var(--ease);z-index:20;box-shadow:0 20px 40px rgba(0,0,0,.3); } .kinetic .hl:hover .note{opacity:1;visibility:visible;transform:translateY(0);} .timeline{border-top:1px solid var(--line);} .timeline-row{display:grid;grid-template-columns:120px 1fr 2fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline;} @media (max-width:700px){.timeline-row{grid-template-columns:1fr;gap:8px;}} .timeline-row b{font-family:var(--font-display);font-weight:600;font-size:22px;} .timeline-row h4{font-size:19px;font-weight:500;} .timeline-row p{color:var(--dim);font-size:14px;max-width:460px;} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} @media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}} .team-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;} .team-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .5s;} .team-card:hover img{filter:grayscale(0%);} .team-card .info{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:#fff;} .team-card .info b{display:block;font-size:16px;} .team-card .info span{font-size:12px;opacity:.7;} /* ================= SERVICES ================= */ .service-row{border-top:1px solid var(--line);padding:42px 0;display:grid;grid-template-columns:60px 1fr 200px 40px;align-items:center;gap:30px;cursor:pointer;transition:background .3s;} .service-row:last-child{border-bottom:1px solid var(--line);} .service-row:hover{background:rgba(255,255,255,.03);} .service-row .num{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--dim);} .service-row h3{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3.6vw,40px);letter-spacing:-.005em;} .service-row .tags{display:flex;flex-wrap:wrap;gap:6px;} .service-row .tags span{font-size:11px;border:1px solid var(--line);padding:5px 10px;border-radius:100px;color:var(--dim);} .service-row .plus{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease);flex-shrink:0;} .service-row:hover .plus{transform:rotate(90deg);background:var(--accent-2);border-color:var(--accent-2);color:#fff;} .service-detail{grid-column:1/-1;max-height:0;overflow:hidden;transition:max-height .5s var(--ease);} .service-row.open .service-detail{max-height:200px;} .service-detail p{padding-top:20px;max-width:640px;color:var(--dim);font-size:15px;line-height:1.6;} .process-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;} @media (max-width:800px){.process-strip{grid-template-columns:1fr;}} .process-cell{background:var(--ink);padding:44px 30px;position:relative;} .process-cell b{font-family:var(--font-display);font-weight:600;font-size:40px;color:var(--accent);} .process-cell h4{margin-top:14px;font-size:17px;} .process-cell p{margin-top:10px;font-size:13px;color:var(--dim);line-height:1.55;} /* tools/stack pills */ .pill-row{display:flex;flex-wrap:wrap;gap:12px;} .pill{border:1px solid var(--line-dark);padding:10px 20px;border-radius:100px;font-size:13px;} .section--dark .pill,.section--dark-2 .pill{border-color:var(--line);} /* ================= PORTFOLIO ================= */ .filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:60px;} .filter-btn{padding:10px 20px;border-radius:100px;border:1px solid var(--line);font-size:13px;color:var(--dim);transition:all .3s;} .filter-btn.active,.filter-btn:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);} .grid-portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media (max-width:900px){.grid-portfolio{grid-template-columns:1fr;}} .p-card{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;cursor:pointer;} .p-card--credit{cursor:default;} .p-card--credit img{filter:grayscale(70%) brightness(.65) saturate(1.15) contrast(1.05);} .p-card--credit .p-info h3{opacity:.75;} .p-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(1.15) contrast(1.05);} .p-card:hover img{transform:scale(1.1);} .p-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 60%);} .p-card .p-info{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2;} .p-card .p-info span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);} .p-card .p-info h3{font-family:var(--font-display);font-weight:600;font-size:23px;margin-top:6px;} .p-card .p-view{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-8px);transition:all .35s var(--ease);z-index:2;} .p-card:hover .p-view{opacity:1;transform:translateY(0);} .p-card.tall{grid-row:span 2;aspect-ratio:auto;} /* case study feature strip */ .feature-case{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;} @media (max-width:900px){.feature-case{grid-template-columns:1fr;}} .feature-case video,.feature-case img{border-radius:18px;width:100%;} .feature-meta{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap;} .feature-meta div span{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;} .feature-meta div b{font-size:16px;} /* ================= CONTACT ================= */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;} @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:50px;}} .field{border-bottom:1px solid var(--line);padding:22px 0;position:relative;} .field label{position:absolute;top:22px;left:0;font-size:16px;color:var(--dim);pointer-events:none;transition:all .3s var(--ease);} .field input,.field textarea{ width:100%;background:transparent;border:none;color:var(--off);font-size:16px;font-family:inherit; padding-top:10px;resize:none; } .field input:focus,.field textarea:focus{outline:none;} .field input:focus ~ label,.field input:not(:placeholder-shown) ~ label, .field textarea:focus ~ label,.field textarea:not(:placeholder-shown) ~ label{ top:-2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent); } .budget-row{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 10px;} .budget-pill{border:1px solid var(--line);padding:9px 18px;border-radius:100px;font-size:13px;cursor:pointer;transition:all .3s;} .budget-pill.active{background:var(--accent);color:var(--ink);border-color:var(--accent);} .contact-info-item{padding:26px 0;border-bottom:1px solid var(--line);} .contact-info-item span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);} .contact-info-item a,.contact-info-item p{font-size:22px;margin-top:8px;display:block;} .contact-info-item a:hover{color:var(--accent);} .map-strip{height:2px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:60px 0;} .offices{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;} @media (max-width:800px){.offices{grid-template-columns:1fr;}} .office b{font-family:var(--font-display);font-weight:600;font-size:20px;} .office p{color:var(--dim);font-size:14px;margin-top:8px;line-height:1.6;} /* faq */ .faq-item{border-top:1px solid var(--line);padding:26px 0;cursor:pointer;} .faq-item:last-child{border-bottom:1px solid var(--line);} .faq-q{display:flex;justify-content:space-between;align-items:center;font-size:18px;} .faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);} .faq-item.open .faq-a{max-height:150px;} .faq-a p{padding-top:16px;color:var(--dim);font-size:14px;line-height:1.6;max-width:600px;} .faq-item .plus{transition:transform .4s var(--ease);} .faq-item.open .plus{transform:rotate(45deg);} /* credits list */ .credits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:50px 60px;} @media (max-width:800px){.credits-grid{grid-template-columns:1fr;}} .credits-col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-dark);margin-bottom:16px;} .section--dark .credits-col h4,.section--dark-2 .credits-col h4{color:var(--dim);} .credits-col ul{border-top:1px solid var(--line-dark);} .section--dark .credits-col ul,.section--dark-2 .credits-col ul{border-color:var(--line);} .credits-col li{padding:12px 0;border-bottom:1px solid var(--line-dark);font-size:14px;line-height:1.5;} .section--dark .credits-col li,.section--dark-2 .credits-col li{border-color:var(--line);} .credits-col li b{font-weight:500;} .credits-col li span{display:block;color:var(--dim-dark);font-size:12.5px;margin-top:2px;} .section--dark .credits-col li span,.section--dark-2 .credits-col li span{color:var(--dim);} /* video thumb / play link */ .thumb-link{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/9;} .thumb-link img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(1.15) contrast(1.05);} .thumb-link:hover img{transform:scale(1.06);} .thumb-link::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 50%);} .play-btn{ width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;color:#fff; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .35s var(--ease),background .3s;z-index:2; } .thumb-link:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);background:var(--accent);color:var(--ink);} /* credit-only chip (no public link) */ .credit-chip{ position:absolute;top:20px;right:20px;z-index:2;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:var(--dim);padding:5px 10px;border-radius:100px;border:1px solid var(--line); } /* misc */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;} @media (max-width:900px){.two-col{grid-template-columns:1fr;}} .small-cap{font-size:13px;color:var(--dim);line-height:1.7;} .mt{margin-top:26px;}