/*
Theme Name: Structured Visuals
Theme URI: https://structuredvisuals.com
Author: Structured Visuals
Description: Custom coded theme for Structured Visuals — custom wall murals and digital wall printing, Metro Detroit.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: structured-visuals
*/

/* ---------- Self-hosted fonts ---------- */
@font-face{font-family:'Familjen Grotesk';src:url('assets/fonts/familjen-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Familjen Grotesk';src:url('assets/fonts/familjen-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Familjen Grotesk';src:url('assets/fonts/familjen-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Familjen Grotesk';src:url('assets/fonts/familjen-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Design tokens ---------- */
:root{
  --sv-accent:#3E63DD;
  --sv-ink:#12162B;
  --sv-bg:#F5F7FC;
  --sv-navy:#0B1024;
  --sv-navy-2:#12183A;
  --sv-muted:#5B6478;
  --sv-line:#E1E5F2;
}

/* ---------- Base / reset ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden;}
body{overflow-x:hidden;}
body{margin:0; font-family:'Space Grotesk',sans-serif; color:var(--sv-ink); background:var(--sv-bg); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,p{margin:0;}
img{max-width:100%;}
.wrap{max-width:1220px; margin:0 auto; padding:0 32px; width:100%;}
.display{font-family:'Familjen Grotesk',sans-serif;}
.eyebrow{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 30px; border-radius:999px; font-family:'Poppins',sans-serif; font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease; white-space:nowrap;}
.btn:hover{transform:translateY(-3px);}
.btn-ghost-dark{border-color:rgba(255,255,255,.35); color:#fff;}
.btn-ghost-dark:hover{border-color:#fff;}
.btn-ghost-light{border-color:var(--sv-ink); color:var(--sv-ink);}
.btn-ghost-light:hover{background:var(--sv-ink); color:#fff;}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.word{display:inline-block; opacity:0; transform:translateY(110%); animation:wordUp .9s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes wordUp{to{opacity:1; transform:translateY(0);}}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden; white-space:nowrap;}
.ticker-track{display:inline-flex; align-items:center; animation:tick 64s linear infinite;}
@keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.ticker-item{padding:0 22px; display:inline-block;}
.ticker-dot{opacity:.55;}

/* ---------- Gallery tiles ---------- */
.tile-art{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.tile:hover .tile-art{transform:scale(1.07) rotate(-1.5deg);}

/* ---------- Cards ---------- */
.card{transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;}
.card:hover{transform:translateY(-6px); border-color:#C7CEE8;}

/* ---------- City grid (Locations) ---------- */
.city-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.city-card{background:#fff; border:1px solid var(--sv-line); border-radius:9px; padding:24px 20px; text-align:center;}
.city-card.more{background:transparent; border-style:dashed;}

/* ---------- Nav ---------- */
.nav-links{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;}
.nav-links a{padding:9px 18px; border-radius:999px; border:1px solid #D7DCEC; font-family:'Poppins',sans-serif; letter-spacing:.03em; transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;}
.nav-links a:hover{background:var(--sv-ink); border-color:var(--sv-ink); color:#fff; transform:translateY(-1px);}
.nav-toggle{display:none; background:transparent;}
.mobile-menu{display:none; flex-direction:column; padding:8px 24px 20px; border-top:1px solid var(--sv-line);}
.mobile-menu a{padding:14px 4px; font-size:15px; font-weight:600; font-family:'Poppins',sans-serif; border-bottom:1px solid #EDEFF6;}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu.is-open{display:flex;}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Form ---------- */
input::placeholder{color:#8890A6;}
.sv-input{font-family:'Space Grotesk',sans-serif; font-size:15px; padding:16px 22px; border-radius:999px; outline:none; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff;}
.sv-input:focus{border-color:#fff !important;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .section-pad{padding-top:72px !important; padding-bottom:72px !important;}
  .hero-grid, .grid-2, .grid-3, .grid-4{grid-template-columns:1fr !important;}
  .city-grid{grid-template-columns:repeat(2,1fr) !important;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .hero-art{margin-top:48px;}
  .process-title{white-space:normal !important;}
  .nav-cta{display:none !important;}
}