/* ================================================================
   CREPO MEDIA — SERVICES.CSS (CONSOLIDATED)
   Shared styles for all service pages, about, and contact.
   Replaces duplicated inline <style> blocks on each page.
   ================================================================ */

/* SCROLL REVEAL */
.reveal-on-scroll {
    opacity: 0; transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* GRID OVERLAY */
.grid-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(0, 168, 198, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 198, 0.03) 1px, transparent 1px);
    background-size: 50px 50px; pointer-events: none; z-index: 1;
}

/* SCAN EFFECT */
.scan-effect { position: relative; overflow: hidden; }
.scan-effect::after {
    content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0,168,198,0.1) 50%, transparent);
    animation: scanMove 4s linear infinite;
}
@keyframes scanMove { 0% { top: -100%; } 100% { top: 100%; } }

/* PARTICLES */
.particle { position: absolute; width: 2px; height: 2px; background: var(--accent); opacity: 0; animation: particleFade 3s infinite; }
@keyframes particleFade { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.8; transform: translateY(-50px); } }

/* METHOD CARDS */
.method-card {
    position: relative; overflow: hidden;
    background: var(--card-bg); padding: 60px 40px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid transparent;
}
.method-card::before {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, transparent, var(--accent), transparent);
    opacity: 0; transition: opacity 0.5s; z-index: 0;
}
.method-card:hover::before { opacity: 0.3; animation: borderGlow 2s linear infinite; }
@keyframes borderGlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.method-card:hover { background: #111; border-color: var(--accent); box-shadow: inset 0 0 20px rgba(0,168,198,0.1); }
.method-card h3 { position: relative; z-index: 1; color: #fff; margin-bottom: 15px; font-size: 1.6rem; }
.method-card p  { position: relative; z-index: 1; }

/* ICON ANIMATIONS */
.icon-wrap svg { display: block; margin-bottom: 24px; transition: all 0.3s ease; animation: iconFloat 3s ease-in-out infinite; }
.method-card:hover .icon-wrap svg { animation: glitchIcon 0.3s ease-in-out infinite; }
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glitchIcon {
    0%, 100% { transform: translate(0); filter: drop-shadow(0 0 5px var(--accent)); }
    25% { transform: translate(-2px, 2px); filter: drop-shadow(0 0 10px var(--accent)); }
    75% { transform: translate(2px, -2px); filter: drop-shadow(0 0 15px var(--accent)); }
}

/* HOLO CARDS */
.holo-card { background: linear-gradient(135deg,#0a0a0a 0%,#111 100%); border: 1px solid #222; transition: all 0.3s ease; }
.holo-card:hover { background: linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%); border-color: var(--accent); box-shadow: 0 0 20px rgba(0,168,198,0.3), inset 0 0 20px rgba(0,168,198,0.1); }
.holo-card h4 { color: var(--accent); font-size: 1.1rem; margin-bottom: 10px; }
.holo-card p  { color: #888; font-size: 0.8rem; font-family: var(--font-mono); }

/* PROCESS NODES */
.process-node { position: relative; transition: all 0.4s ease; }
.process-node::after {
    content: ''; position: absolute; left: -42px; top: 50%; width: 16px; height: 16px;
    background: var(--accent); border-radius: 50%; transform: translateY(-50%) scale(0);
    transition: transform 0.4s ease; box-shadow: 0 0 20px var(--accent);
}
.process-node:hover::after { transform: translateY(-50%) scale(1); }

/* DATA STREAM */
.data-stream { position: absolute; width: 2px; height: 100px; background: linear-gradient(to bottom,transparent,var(--accent),transparent); animation: streamFlow 3s linear infinite; opacity: 0.6; }
@keyframes streamFlow { 0% { top: -100px; opacity: 0; } 50% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } }

/* CTA GLITCH */
.cta-glitch { position: relative; animation: textGlitch 5s infinite; }
@keyframes textGlitch { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(-2px,2px); } 94% { transform: translate(2px,-2px); } 96% { transform: translate(-1px,1px); } }

/* TERMINAL TITLE */
.terminal-title { font-size: 1.6rem; color: #fff; margin-bottom: 15px; cursor: default; transition: color 0.3s; position: relative; z-index: 1; }
.terminal-title:hover { color: var(--accent); }
.terminal-title:hover::after { content: attr(data-terminal); position: absolute; bottom: -22px; left: 0; font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); opacity: 0.8; white-space: nowrap; }

/* 2-COL GRID */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #222; border: 1px solid #222; }

/* DIST SPLIT */
.dist-split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }

/* HERO INTERNAL */
.hero-internal { position: relative; overflow: hidden; margin-top: 67px; min-height: 420px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.hero-internal .hero-content { position: relative; z-index: 10; text-align: center; width: 100%; padding: 60px 20px; }
.hero-internal h1 { font-size: 7vw; color: #fff; margin: 15px auto; letter-spacing: -1px; max-width: 900px; }

/* STRATEGY SECTION */
.strategy-section { padding: 100px 0; background: #050505; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.strategy-track { position: relative; padding-left: 50px; }
.strategy-step { padding: 40px; border: 1px solid #222; margin-bottom: 30px; background: var(--card-bg); transition: border-color 0.3s, background 0.3s; }
.strategy-step:hover { border-color: var(--accent); background: #0a0a0a; }
.step-num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); display: block; margin-bottom: 10px; }
.strategy-step h3 { font-size: 1.4rem; color: #fff; margin-bottom: 12px; }
.strategy-step p  { font-family: var(--font-mono); color: #888; font-size: 0.85rem; line-height: 1.7; }

/* SPLIT SECTION */
.split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; border-bottom: 1px solid var(--border); }
.sticky-image-container { position: sticky; top: 0; height: 100vh; overflow: hidden; border-right: 1px solid var(--border); }
.sticky-image-container img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); }
.text-side { padding: 80px; background: #050505; position: relative; z-index: 2; }
.text-side h2 { font-size: 3rem; color: #fff; margin-bottom: 30px; line-height: 1; }

/* SECTION CONTAINER */
.section-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; }

/* BTN SUBMIT */
.btn-submit { display: inline-block; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 16px 36px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
.btn-submit:hover { background: var(--accent); color: #000; box-shadow: 0 0 20px rgba(0,168,198,0.4); }

/* PULSE */
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.7; } }

/* OWNED MEDIA — KINETIC CARDS */
.services-kinetic { padding: 100px 0; background: var(--bg); border-bottom: 1px solid var(--border); }
.k-grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: #222; border: 1px solid #222; max-width: 1400px; margin: 0 auto; }
.k-card { background: var(--card-bg); padding: 50px 30px; cursor: pointer; transition: background 0.3s, border-color 0.3s; border: 1px solid transparent; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; }
.k-card:hover { background: #111; border-color: var(--accent); }
.kc-code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); display: block; margin-bottom: 12px; }
.kc-head { font-size: 1.5rem; color: #fff; line-height: 1; }
.kc-desc-box { min-height: 60px; }
.kc-desc { font-family: var(--font-mono); color: #888; font-size: 0.82rem; line-height: 1.7; }
.cursor { display: inline-block; width: 8px; height: 14px; background: var(--accent); animation: blinker 0.7s step-start infinite; vertical-align: middle; }

/* PHILOSOPHY SECTION */
.philosophy-section { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.philo-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.2) brightness(0.4); z-index: 0; }
.philo-content { position: relative; z-index: 5; max-width: 800px; padding: 60px 40px; background: rgba(0,0,0,0.8); border: 1px solid #333; box-shadow: 10px 10px 0px var(--accent); backdrop-filter: blur(5px); }
.philo-content h2 { font-size: 2.5rem; color: #fff; margin-bottom: 20px; }
.philo-content p  { font-family: var(--font-mono); color: #888; font-size: 0.9rem; line-height: 1.8; }

/* HERO SERVICE */
.hero-service { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-service .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.3) brightness(0.35); z-index: 0; }
.hero-service .hero-content { position: relative; z-index: 10; text-align: center; padding: 0 20px; }

/* ================================================================
   MOBILE OVERRIDES
   ================================================================ */
@media (max-width: 768px) {
    .hero-internal { margin-top: 58px !important; min-height: 280px !important; }
    .hero-internal h1 { font-size: 11vw !important; }
    .split-section { grid-template-columns: 1fr !important; }
    .sticky-image-container { position: relative !important; height: 240px !important; top: auto !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; }
    .text-side { padding: 36px 20px !important; }
    .grid-2col, .dist-split { grid-template-columns: 1fr !important; }
    .method-card { padding: 32px 20px !important; }
    .strategy-section { padding: 50px 0 !important; }
    .strategy-track { padding-left: 16px !important; }
    .strategy-step { padding: 20px 16px !important; margin-bottom: 12px !important; }
    .strategy-step h3 { font-size: 1.1rem !important; }
    .process-node::after { display: none !important; }
    .section-inner { padding: 0 16px !important; }
    .services-kinetic { padding: 50px 0 !important; }
    .k-grid-container { grid-template-columns: 1fr !important; }
    .k-card { min-height: auto !important; padding: 28px 18px !important; }
    .philo-content { padding: 28px 18px !important; margin: 0 16px !important; }
    .philo-content h2 { font-size: 1.8rem !important; }
    .hero-service { height: 70vh !important; }
    .hero-service .hero-content h1 { font-size: 13vw !important; }
    .terminal-title { font-size: 1.2rem !important; }
    .terminal-title:hover::after { display: none !important; }
}

/* 2-col grid with gap (about page strategy section) */
.grid-2col-gap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
@media (max-width: 768px) {
    .grid-2col-gap { grid-template-columns: 1fr !important; gap: 30px !important; }
}

/* ================================================================
   CONTACT PAGE SPECIFIC
   ================================================================ */
.contact-hero {
    padding: 160px 20px 80px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    position: relative;
    background: #000;
}
.contact-hero h1 { font-size: 5rem; margin-bottom: 20px; color: #fff; }

/* Form inputs */
.input-row { margin-bottom: 30px; }
.input-row label { color: var(--accent); font-size: 0.75rem; display: block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-mono); }
.input-row input,
.input-row textarea {
    width: 100%; background: transparent; border: none;
    border-bottom: 2px solid #333; padding: 15px 0; color: #fff;
    font-family: var(--font-mono); font-size: 1rem; transition: border-color 0.3s;
}
.input-row input:focus, .input-row textarea:focus { outline: none; border-color: var(--accent); }
.input-row input::placeholder, .input-row textarea::placeholder { color: #555; text-transform: uppercase; }
.input-row select {
    width: 100%; background: transparent; border: none;
    border-bottom: 2px solid #333; padding: 20px 0; color: #fff;
    font-family: var(--font-main); font-size: 1.4rem; font-weight: 700;
    cursor: pointer; transition: border-color 0.3s; appearance: none;
}
.input-row select:focus { outline: none; border-color: var(--accent); }
.input-row select option { background: #111; color: #fff; }
.input-row textarea { resize: vertical; min-height: 100px; }

/* Location cards */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.loc-card {
    background: linear-gradient(135deg, #0a0a0a 0%, #111 100%);
    padding: 40px; border: 1px solid #333;
    transition: all 0.3s ease; position: relative; overflow: hidden;
}
.loc-card::before {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, transparent, var(--accent), transparent);
    opacity: 0; transition: opacity 0.5s; z-index: 0;
}
.loc-card:hover::before { opacity: 0.3; animation: borderGlow 2s linear infinite; }
.loc-card:hover { background: linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%); box-shadow: 0 0 20px rgba(0,168,198,0.3); border-color: var(--accent); }
.loc-card h3 { color: var(--accent); margin-bottom: 15px; position: relative; z-index: 1; }
.loc-card p  { position: relative; z-index: 1; }

/* Footer brand reveal */
.footer-brand-reveal {
    position: relative; height: 400px; display: flex;
    align-items: center; justify-content: center; margin: 60px 0;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(0,168,198,0.1) 0%, transparent 70%);
}
.brand-text-container { position: relative; width: 100%; height: 100%; }
.brand-letter {
    position: absolute; font-size: 15vw; font-weight: bold;
    color: transparent; -webkit-text-stroke: 2px var(--accent);
    opacity: 0; transition: all 1s cubic-bezier(0.68,-0.55,0.265,1.55);
    text-shadow: 0 0 30px rgba(0,168,198,0.5);
}
.brand-letter.animate { opacity: 1; }
.brand-letter:nth-child(1)  { left:  5%; top: 50%; transform: translate(-100%,-50%) rotate(-180deg); }
.brand-letter:nth-child(2)  { left: 15%; top: 50%; transform: translate(0,-200%) rotate(90deg); }
.brand-letter:nth-child(3)  { left: 25%; top: 50%; transform: translate(0,200%) rotate(-90deg); }
.brand-letter:nth-child(4)  { left: 35%; top: 50%; transform: translate(200%,-50%) rotate(180deg); }
.brand-letter:nth-child(5)  { left: 45%; top: 50%; transform: translate(-200%,-50%) scale(0); }
.brand-letter:nth-child(6)  { left: 55%; top: 50%; transform: translate(0,-200%) rotate(-180deg); }
.brand-letter:nth-child(7)  { left: 65%; top: 50%; transform: translate(0,200%) rotate(90deg); }
.brand-letter:nth-child(8)  { left: 75%; top: 50%; transform: translate(200%,-50%) rotate(-90deg); }
.brand-letter:nth-child(9)  { left: 85%; top: 50%; transform: translate(-200%,-50%) scale(0); }
.brand-letter:nth-child(10) { left: 92%; top: 50%; transform: translate(100%,-50%) rotate(180deg); }
.brand-letter.animate:nth-child(1),
.brand-letter.animate:nth-child(2),
.brand-letter.animate:nth-child(3),
.brand-letter.animate:nth-child(4),
.brand-letter.animate:nth-child(5),
.brand-letter.animate:nth-child(6),
.brand-letter.animate:nth-child(7),
.brand-letter.animate:nth-child(8),
.brand-letter.animate:nth-child(9),
.brand-letter.animate:nth-child(10) { transform: translate(-50%,-50%) rotate(0deg) scale(1); }

.parallax-layer { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.parallax-circle {
    position: absolute; border: 1px solid rgba(0,168,198,0.2); border-radius: 50%;
    animation: circleExpand 15s ease-in-out infinite;
}
@keyframes circleExpand { 0%,100% { transform: scale(0.8) rotate(0deg); opacity: 0.3; } 50% { transform: scale(1.2) rotate(180deg); opacity: 0.6; } }
.parallax-circle:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 20%; animation-delay: 0s; }
.parallax-circle:nth-child(2) { width: 200px; height: 200px; top: 60%; left: 70%; animation-delay: 2s; }
.parallax-circle:nth-child(3) { width: 400px; height: 400px; top: 30%; left: 50%; animation-delay: 4s; }

/* Contact mobile */
@media (max-width: 768px) {
    .contact-hero h1 { font-size: 2.5rem !important; }
    .contact-hero { padding: 100px 16px 50px !important; }
    .contact-form { padding: 40px 16px !important; }
    .loc-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .footer-brand-reveal { height: 220px !important; margin: 30px 0 !important; }
    .brand-letter { font-size: 10vw !important; }
}

/* Owned media page timeline animations */
@keyframes lineGrow { from { height: 0; } to { height: 100%; } }