/* =====================================================
   SERVICES SHARED STYLES — Two Pencils Design Studio
   Used by services.html + all 6 sub-service pages
   ===================================================== */

/* ── BASE ── */
:root {
  --dark:#2a2a2a; --darkest:#111111; --cream:#f5f0eb; --warm-white:#faf7f2;
  --coral:#e07a5f; --sage:#a8d5ba; --text:#2a2a2a; --text-light:#6b6b6b;
  --text-on-dark:#f5f0eb;
  --font-display:'Syne',Arial,sans-serif;
  --font-body:'Space Grotesk',Arial,sans-serif;
  --font-accent:'Caveat',cursive;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); color:var(--text); background:var(--cream); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── NAV ── */
.nav { position:fixed; inset:0 0 auto; z-index:100; padding:23px clamp(20px,5vw,60px); color:var(--text-on-dark); transition:background .3s,color .3s,padding .3s; }
.nav.scrolled { background:rgba(245,240,235,.97); color:var(--text); padding-top:16px; padding-bottom:16px; box-shadow:0 1px 0 rgba(42,42,42,.08); }
.nav-inner { max-width:1400px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:15px; font-weight:800; letter-spacing:-.05em; text-transform:uppercase; }
.nav-logo-img { filter: brightness(0) invert(1); transition: filter .3s; }
.nav.scrolled .nav-logo-img { filter: none; }
.brand-pencils { width:21px; height:26px; position:relative; display:inline-block; border-left:2px solid currentColor; border-right:2px solid var(--coral); transform:skew(-13deg); }
.brand-pencils::before,.brand-pencils::after { content:''; position:absolute; width:4px; height:4px; bottom:-4px; background:currentColor; transform:rotate(45deg); }
.brand-pencils::before { left:-3px; }
.brand-pencils::after { right:-3px; background:var(--coral); }
.nav-right { display:flex; align-items:center; gap:22px; }
.nav-cta { border:1px solid currentColor; padding:10px 15px; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.1em; transition:.25s; }
.nav-cta:hover { background:var(--coral); border-color:var(--coral); color:white; }
.nav-menu-btn { width:32px; height:32px; padding:6px 0; border:0; background:transparent; display:grid; align-content:center; gap:6px; cursor:pointer; }
.menu-line { display:block; width:29px; height:1.5px; background:currentColor; transition:transform .3s var(--ease-out); }
.nav-menu-btn.active .menu-line:first-child { transform:translateY(3.75px) rotate(45deg); }
.nav-menu-btn.active .menu-line:last-child { transform:translateY(-3.75px) rotate(-45deg); }

/* ── MENU OVERLAY ── */
.menu-overlay { position:fixed; z-index:99; inset:0; display:none; padding:110px clamp(20px,5vw,60px) 35px; background:var(--darkest); color:var(--text-on-dark); }
.menu-overlay.active { display:block; }
.menu-overlay-inner { max-width:1400px; height:100%; margin:auto; display:flex; flex-direction:column; justify-content:space-between; }
.menu-links { display:grid; gap:8px; }
.menu-link { display:block; font-family:var(--font-display); font-size:clamp(48px,10vw,100px); font-weight:800; line-height:1.1; text-transform:uppercase; color:var(--text-on-dark); overflow:hidden; padding:.12em 0; margin:-.12em 0; transition:color .3s; }
.menu-link:hover, .nav-active-link { color:var(--coral); }
.menu-footer { display:flex; justify-content:space-between; gap:20px; color:#bbb; font-size:13px; }
.menu-footer a:hover { color:var(--coral); }

/* ── EYEBROW ── */
.eyebrow { display:flex; align-items:center; gap:12px; color:var(--coral); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; margin-bottom:26px; }
.eyebrow::before { content:''; width:34px; height:1px; background:currentColor; }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(50px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); }
.reveal-right.visible { opacity:1; transform:none; }
.reveal-scale { opacity:0; transform:scale(.88); transition:opacity .8s var(--ease-out),transform .8s var(--ease-spring); }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.stagger-child { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.stagger-child.visible { opacity:1; transform:none; }

/* ── ANIMATED GRID BG ── */
.hero-grid-lines { position:absolute; inset:0; pointer-events:none; }
.hero-grid-lines::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:80px 80px; animation:gridDrift 18s linear infinite; }
@keyframes gridDrift { 0%{background-position:0 0;} 100%{background-position:80px 80px;} }
.hero-orb { position:absolute; width:600px; height:600px; border-radius:50%; right:-150px; bottom:-150px; background:radial-gradient(circle,rgba(224,122,95,.18) 0%,transparent 70%); animation:orbPulse 6s ease-in-out infinite; }
@keyframes orbPulse { 0%,100%{transform:scale(1);opacity:.8;} 50%{transform:scale(1.15);opacity:1;} }

/* ── TICKER ── */
.ticker { background:var(--coral); padding:18px 0; overflow:hidden; border-block:1px solid var(--darkest); }
.ticker-track { display:flex; width:max-content; animation:tickerRoll 25s linear infinite; }
@keyframes tickerRoll { to{transform:translateX(-50%);} }
.ticker-group { display:flex; flex-shrink:0; align-items:center; gap:24px; padding-right:24px; font-family:var(--font-display); font-size:clamp(20px,2.2vw,36px); font-weight:800; letter-spacing:-.05em; text-transform:uppercase; color:var(--darkest); }
.ticker-sep { font-family:var(--font-accent); color:var(--cream); font-size:1.2em; }

/* ── FOOTER ── */
.footer { background:#1a1a1a; color:var(--text-on-dark); padding:60px clamp(20px,5vw,80px) 24px; }
.footer-inner { max-width:1400px; margin:auto; }
.footer-top { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; padding-bottom:55px; }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer-logo { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.05em; text-transform:uppercase; }
.footer-studio-name { color:#aaa; font-size:13px; line-height:1.35; }
.footer-tagline { margin:0; color:var(--coral); font-family:var(--font-accent); font-size:28px; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.footer-col { display:grid; align-content:start; gap:10px; }
.footer-col h4 { margin:0 0 5px; color:var(--coral); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.footer-col a { color:#bbb; font-size:13px; }
.footer-col a:hover { color:white; }
.footer-col a[aria-current="page"] { color:var(--coral); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:20px; display:flex; justify-content:space-between; color:#888; font-size:12px; }
.footer-email:hover { color:var(--coral); }

/* ── CTA BLOCK (shared across sub-pages) ── */
.page-cta { padding:clamp(90px,12vw,160px) clamp(20px,5vw,80px); background:var(--cream); text-align:center; position:relative; overflow:hidden; }
.cta-bg-text { position:absolute; font-family:var(--font-display); font-size:clamp(60px,15vw,240px); font-weight:800; letter-spacing:-.08em; color:rgba(42,42,42,.04); top:50%; left:50%; transform:translate(-50%,-50%) rotate(-7deg); white-space:nowrap; pointer-events:none; animation:ctaDrift 20s linear infinite alternate; }
@keyframes ctaDrift { from{transform:translate(-50%,-50%) rotate(-7deg);} to{transform:translate(-48%,-52%) rotate(-5deg);} }
.cta-inner { position:relative; z-index:1; }
.cta-title { font-family:var(--font-display); font-size:clamp(48px,8vw,130px); text-transform:uppercase; letter-spacing:-.065em; line-height:.86; margin:0; }
.cta-title span { color:var(--coral); }
.cta-sub { font-family:var(--font-accent); font-size:clamp(20px,2.5vw,36px); color:var(--text-light); margin:16px 0 0; }
.cta-desc { max-width:420px; margin:18px auto 38px; color:var(--text-light); line-height:1.6; }
.cta-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.cta-btn { padding:15px 24px; border:1px solid var(--dark); display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease-spring); }
.cta-btn.primary { background:var(--coral); border-color:var(--coral); color:#fff; }
.cta-btn:hover { background:var(--darkest); border-color:var(--darkest); color:#fff; transform:translateY(-4px); }
.cta-btn.primary:hover { background:var(--darkest); }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .footer-top { grid-template-columns:1fr; gap:36px; }
}
@media(max-width:680px) {
  .nav-cta { display:none; }
  .menu-footer { flex-direction:column; align-items:flex-start; gap:20px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .footer-bottom { display:grid; gap:10px; text-align:center; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger-child { opacity:1!important; transform:none!important; }
}

.nav-menu-btn { color: inherit; }

/* ---- Custom Cursor ---- */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background 0.3s; }
.cursor.active .cursor-dot { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.5); }
.cursor-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0; transition: opacity 0.3s; }
.cursor.active .cursor-text { opacity: 1; }
.nav-menu-btn { color: inherit; }