/*
Theme Name: Crio Creatives V3
Theme URI: https://criocreatives.com/
Author: Crio Creatives
Description: Premium portfolio-first WordPress theme for Crio Creatives, with editable homepage imagery and content.
Version: 3.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: crio-creatives
*/

:root { --red:#ed1c24; --ink:#101010; --paper:#f4f2ed; --muted:#777; --line:rgba(16,16,16,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:min(1420px,calc(100% - 64px)); margin-inline:auto; }
.site-header { position:fixed; z-index:50; inset:0 0 auto; padding:24px 0; color:#fff; transition:.3s ease; }
.site-header.scrolled,.site-header.menu-open { background:rgba(16,16,16,.96); padding:16px 0; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:13px; width:auto; height:auto; border-radius:0; overflow:visible; background:none; box-shadow:none; }
.brand img { width:54px; height:54px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.22); }
.brand-name { font-size:19px; font-weight:700; letter-spacing:-.03em; }
.nav { display:flex; align-items:center; gap:30px; margin:0; padding:0; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.nav li { margin:0; list-style:none; }
.nav a { opacity:.85; transition:.2s; }.nav a:hover { opacity:1; color:var(--red); }
.menu-toggle { display:none; border:0; background:none; color:#fff; font:700 12px/1 Arial; letter-spacing:.12em; text-transform:uppercase; }
.hero { min-height:100svh; display:flex; align-items:flex-end; position:relative; overflow:hidden; color:#fff; background:#1a1a1a center/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12) 20%,rgba(0,0,0,.76) 100%); }
.hero-content { position:relative; z-index:1; padding:170px 0 72px; display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:end; gap:48px; }
.eyebrow { margin:0 0 20px; color:var(--red); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.hero h1 { max-width:1040px; margin:0; font-size:clamp(54px,8.2vw,132px); line-height:.84; letter-spacing:-.065em; text-transform:uppercase; }
.hero-side { padding-bottom:8px; font-size:13px; line-height:1.5; letter-spacing:.05em; }
.scroll-cue { display:block; margin-top:24px; color:var(--red); font-size:24px; }
.intro { padding:150px 0 130px; }
.intro-grid { display:grid; grid-template-columns:1fr 2fr; gap:80px; }
.section-index { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.intro-copy { margin:0; max-width:1000px; font-size:clamp(34px,4.6vw,72px); line-height:1.02; letter-spacing:-.045em; }
.intro-copy strong { color:var(--red); font-weight:inherit; }
.work { padding:0 0 150px; }
.section-head { padding:0 0 30px; display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); }
.section-head h2 { margin:0; font-size:clamp(44px,6vw,88px); letter-spacing:-.055em; text-transform:uppercase; }
.section-head span { padding-bottom:9px; color:var(--muted); font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.project-grid { margin-top:36px; display:grid; grid-template-columns:repeat(12,1fr); gap:60px 24px; }
.project { grid-column:span 6; }
.project-wide { grid-column:span 12; }
.project-wide .project-media { aspect-ratio:16/8; }
.project:nth-child(3),.project:nth-child(4) { grid-column:span 6; }
.project-media { aspect-ratio:16/11; overflow:hidden; background:#ddd; }
.project-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.portrait-media img { object-position:center 36%; }
.project:hover img { transform:scale(1.035); }
.project-meta { padding-top:16px; border-top:1px solid var(--ink); margin-top:14px; }
.project-title { margin:0; font-size:20px; letter-spacing:-.03em; }
.project-detail { margin:5px 0 0; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.services { background:var(--ink); color:#fff; padding:130px 0; }
.services-grid { display:grid; grid-template-columns:1fr 2fr; gap:80px; }
.services h2 { margin:0; font-size:clamp(44px,6vw,82px); line-height:.9; letter-spacing:-.055em; text-transform:uppercase; }
.service-list { border-top:1px solid rgba(255,255,255,.3); }
.service-item { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.3); }
.service-item span { color:var(--red); font-size:11px; font-weight:800; }
.service-item h3 { margin:0; font-size:clamp(24px,3vw,42px); font-weight:500; letter-spacing:-.035em; }
.studio { padding:150px 0; }
.studio-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:80px; align-items:center; }
.studio-image { aspect-ratio:4/3; overflow:hidden; }
.studio-image img { width:100%; height:100%; object-fit:cover; }
.studio h2 { margin:0 0 30px; font-size:clamp(44px,6vw,84px); line-height:.88; letter-spacing:-.06em; text-transform:uppercase; }
.studio p { max-width:560px; margin:0; font-size:19px; line-height:1.55; }
.client-strip { overflow:hidden; padding:24px 0; background:var(--red); color:#fff; }
.client-strip>p { margin:0 0 18px; text-align:center; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.ticker { overflow:hidden; }
.ticker-track { display:flex; width:max-content; animation:ticker 32s linear infinite; }
.ticker-track span { display:flex; align-items:center; gap:34px; padding-right:34px; font-size:clamp(25px,3vw,42px); font-weight:800; letter-spacing:-.04em; white-space:nowrap; }
.ticker-track span::after { content:"✦"; color:var(--ink); font-size:.55em; }
@keyframes ticker { to { transform:translateX(-50%); } }
.footprint { padding:140px 0; background:#dedbd4; }
.footprint-head { display:grid; grid-template-columns:1.5fr 1fr; gap:70px; align-items:end; }
.footprint h2 { margin:0; font-size:clamp(50px,7vw,102px); line-height:.86; letter-spacing:-.065em; text-transform:uppercase; }
.footprint-head p { max-width:440px; margin:0 0 7px; font-size:19px; line-height:1.5; }
.location-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:80px; border-top:1px solid var(--ink); }
.location-grid div { display:flex; flex-direction:column; gap:7px; padding:25px 20px 25px 0; border-bottom:1px solid var(--ink); }
.location-grid div:nth-child(3n+2),.location-grid div:nth-child(3n+3) { padding-left:20px; border-left:1px solid var(--ink); }
.location-grid strong { font-size:22px; letter-spacing:-.03em; }
.location-grid span { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.contact { background:var(--red); color:#fff; padding:120px 0 42px; }
.contact h2 { margin:0; max-width:1100px; font-size:clamp(54px,9vw,138px); line-height:.82; letter-spacing:-.07em; text-transform:uppercase; }
.contact-link { display:inline-block; margin-top:54px; padding-bottom:8px; border-bottom:2px solid #fff; font-size:clamp(20px,2.4vw,34px); }
.footer-row { margin-top:120px; padding-top:25px; border-top:1px solid rgba(255,255,255,.5); display:flex; justify-content:space-between; gap:24px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.socials { display:flex; gap:24px; }
.page-shell { min-height:80vh; padding:170px 0 100px; }
.entry-title { font-size:clamp(48px,8vw,110px); letter-spacing:-.06em; text-transform:uppercase; }
.entry-content { max-width:820px; font-size:18px; line-height:1.65; }
@media (max-width:900px) {
  .wrap { width:min(100% - 36px,720px); }
  .menu-toggle { display:block; }
  .nav { position:absolute; inset:68px 0 auto; display:none; flex-direction:column; align-items:flex-start; padding:24px 18px 32px; background:rgba(16,16,16,.96); font-size:16px; }
  .nav.open { display:flex; }
  .hero-content { grid-template-columns:1fr; gap:30px; padding-bottom:42px; }
  .hero h1 { font-size:clamp(48px,16vw,82px); }
  .hero-side { max-width:270px; }
  .intro,.studio { padding:95px 0; }
  .intro-grid,.services-grid,.studio-grid { grid-template-columns:1fr; gap:38px; }
  .footprint-head { grid-template-columns:1fr; gap:30px; }
  .location-grid { grid-template-columns:repeat(2,1fr); margin-top:52px; }
  .location-grid div:nth-child(n) { padding:20px 14px 20px 0; border-left:0; }
  .location-grid div:nth-child(even) { padding-left:14px; border-left:1px solid var(--ink); }
  .footprint { padding:95px 0; }
  .project-grid { gap:48px 16px; }
  .project { grid-column:span 12 !important; }
  .work { padding-bottom:95px; }
  .services { padding:90px 0; }
  .footer-row { margin-top:80px; flex-direction:column; }
}
@media (max-width:520px) {
  .wrap { width:calc(100% - 28px); }
  .site-header { padding:17px 0; }
  .brand img { width:46px; height:46px; }
  .brand-name { font-size:16px; }
  .hero { min-height:88svh; }
  .section-head { align-items:flex-start; flex-direction:column; gap:12px; }
  .intro-copy { font-size:35px; }
  .project-media { aspect-ratio:4/3; }
  .service-item { grid-template-columns:42px 1fr; }
  .contact { padding-top:80px; }
  .contact-link { overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.project-media img{transition:none}.ticker-track{animation:none} }