/* Crio Creatives static website stylesheet — hosted on GitHub Pages. */

: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:Helvetica,Arial,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 .header-logo { display:block; width:168px; height:48px; border-radius:9px; object-fit:cover; border:0; box-shadow:none; }
.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:.9; transition:.2s; color:#fff; }.nav a:hover { opacity:1; color:#fff; }
.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:18px 0; background:var(--red); color:#fff; }
.client-strip>p { margin:0 0 13px; text-align:center; font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.ticker { overflow:hidden; }
.ticker-track { display:flex; width:max-content; animation:ticker 84s linear infinite; }
.ticker-track span { display:flex; align-items:center; gap:28px; padding-right:28px; font-family:Helvetica,Arial,sans-serif; font-size:clamp(17px,2vw,28px); font-weight:300; letter-spacing:-.025em; white-space:nowrap; }
.ticker-track span::after { content:"✦"; color:var(--ink); font-size:.5em; }
@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 .header-logo { width:147px; height:42px; }

  .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; }
}
/* Portfolio visual language: charcoal surfaces, red accents and rounded cards. */
:root { --red:#ed1220; --ink:#f4f4f4; --paper:#090909; --muted:#b4b4b9; --line:rgba(255,255,255,.13); --surface:#111214; }
html { scroll-padding-top:110px; }
.wrap { width:min(1360px,calc(100% - 80px)); }
.site-header,.site-header.scrolled,.site-header.menu-open { padding:10px 0; background:rgba(237,28,36,.96); border-bottom:1px solid rgba(255,255,255,.18); backdrop-filter:blur(16px); }
.nav { gap:24px; letter-spacing:.07em; }
.nav-contact,.button-link { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:var(--red); color:#fff; padding:16px 23px; border-radius:9px; font-size:13px; line-height:1.3; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }\n.site-header .nav-contact { background:#fff; color:var(--red); }
.nav .nav-contact { opacity:1; border-radius:9px; }
.nav .nav-contact:hover { background:#f2f2f2; color:var(--red); }\n.button-link:hover { background:#c90f1b; color:#fff; }
a:focus-visible,button:focus-visible { outline:3px solid #fff; outline-offset:5px; }
.hero { min-height:92svh; }
.hero::before { background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.18) 35%,rgba(9,9,9,.78) 75%,rgba(9,9,9,.96)); }
.hero h1 { max-width:950px; line-height:.91; }
.hero .eyebrow { color:#fff; }
.hero-side { color:#e0e0e0; }
.intro { padding:100px 0; }
.intro-grid { gap:56px; }
.section-index { color:var(--red); padding-top:10px; }
.intro-copy { font-size:clamp(30px,3.9vw,58px); line-height:1.12; }
.work { padding-bottom:100px; }
.section-head { align-items:center; gap:36px; padding-bottom:28px; border:0; }
.section-head h2 { font-size:clamp(38px,4.6vw,64px); line-height:1.05; text-transform:none; letter-spacing:-.045em; }
.section-head span { max-width:430px; line-height:1.8; padding:0; letter-spacing:.1em; }
.project-grid { margin-top:12px; gap:24px; }
.project { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); transition:border-color .25s ease,box-shadow .25s ease; }
.project:hover { border-color:rgba(237,18,32,.5); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.project-media { background:#191a1c; }
.project-meta { display:flex; flex-direction:column; gap:10px; padding:24px; margin:0; border:0; }
.project-title { font-size:23px; line-height:1.2; letter-spacing:-.025em; }
.project-detail { order:-1; margin:0; color:#ff3441; font-weight:800; font-size:10px; letter-spacing:.12em; }
.portfolio-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:32px; padding:30px; background:linear-gradient(110deg,#191012,#111214); border:1px solid rgba(237,18,32,.22); border-radius:18px; }
.portfolio-cta h3 { margin:0 0 8px; font-size:25px; letter-spacing:-.03em; }
.portfolio-cta p { margin:0; max-width:640px; color:var(--muted); line-height:1.6; }
.button-link { flex-shrink:0; }
.services { background:var(--paper); padding:100px 0; border-top:1px solid var(--line); }
.services-grid { grid-template-columns:1fr 1.4fr; gap:70px; }
.services h2,.studio h2,.footprint h2 { font-size:clamp(38px,4.5vw,64px); line-height:1.04; letter-spacing:-.045em; text-transform:none; }
.service-list { border-color:var(--line); }
.service-item { display:block; border-color:var(--line); padding:26px 0; }
.service-item span { display:none; }
.service-item h3 { font-size:clamp(23px,2.5vw,34px); }
.client-strip { background:#111214; border-block:1px solid var(--line); padding:28px 0; }
.client-strip>p { color:#ff3441; }
.ticker-group { display:flex; }
.ticker-track span { font-size:clamp(24px,2.7vw,38px); }
.ticker-track span::after { color:var(--red); }
.client-strip:hover .ticker-track { animation-play-state:paused; }
.footprint { background:var(--paper); padding:100px 0; }
.footprint-head { gap:60px; }
.footprint-head p { color:var(--muted); font-size:17px; }
.location-grid { gap:14px; margin-top:40px; border:0; }
.location-grid div:nth-child(n) { border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--surface); }
.location-grid strong { font-size:20px; }
.studio { border-top:1px solid var(--line); padding:100px 0; }
.studio-grid { gap:60px; grid-template-columns:1.2fr 1fr; }
.studio-image { aspect-ratio:3/2; border-radius:18px; border:1px solid var(--line); }
.studio h2 { margin:0 0 24px; }
.studio p { color:var(--muted); font-size:17px; line-height:1.7; }
.studio .eyebrow { margin:0 0 18px; color:var(--red); font-size:12px; line-height:1.4; }
.contact { background:var(--surface); border-top:1px solid var(--line); padding:90px 0 34px; }
.contact .eyebrow { color:var(--red) !important; }
.contact h2 { max-width:1000px; font-size:clamp(44px,6.6vw,94px); line-height:1; text-transform:none; letter-spacing:-.05em; }
.contact-form { max-width:900px; margin-top:40px; }
.contact-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-field { display:flex; flex-direction:column; gap:9px; font-size:14px; font-weight:700; }
.contact-field-full { grid-column:1 / -1; }
.contact-field small { font-weight:400; color:var(--muted); }
.contact-field input,.contact-field select,.contact-field textarea { width:100%; padding:16px 18px; background:#090909; color:#f4f4f4; border:1px solid #45454b; border-radius:12px; font:400 16px/1.5 Arial,Helvetica,sans-serif; color-scheme:dark; }
.contact-field textarea { min-height:160px; resize:vertical; }
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { outline:2px solid var(--red); outline-offset:2px; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color:#939398; }
.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:24px; }
.contact-actions button { border:0; cursor:pointer; }
.contact-actions button:disabled { opacity:.6; cursor:wait; }
.contact-actions p,.contact-status { color:var(--muted); font-size:13px; line-height:1.6; }
.contact-actions p { max-width:380px; margin:0; }
.contact-status { margin:18px 0 0; }
.contact-status:empty { display:none; }
.contact-status[data-state="error"] { color:#ff8c94; }
.contact-status[data-state="success"] { color:#a9e8c3; }
.contact-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.footer-row { border-color:var(--line); color:var(--muted); margin-top:80px; }
@media (max-width:1050px) { .nav { gap:16px; font-size:11px; } .header-inner { gap:20px; } }
@media (max-width:900px) {
  .wrap { width:calc(100% - 40px); }
  .nav { inset:68px 0 auto; background:var(--red); padding:24px 20px; font-size:15px; gap:22px; border-bottom:1px solid rgba(255,255,255,.18); }
  .nav .nav-contact { align-self:flex-start; }
  .intro-grid,.services-grid,.studio-grid { grid-template-columns:1fr; gap:32px; }
  .intro,.studio,.services,.footprint { padding:72px 0; }
  .work { padding-bottom:72px; }
  .project-grid { gap:24px; }
  .section-head { align-items:flex-start; flex-direction:column; gap:16px; }
  .project-meta { padding:22px; }
  .portfolio-cta { align-items:flex-start; flex-direction:column; padding:24px; }
  .studio-image { max-width:100%; }
  .studio p { max-width:680px; }
}
@media (max-width:520px) {
  .wrap { width:calc(100% - 32px); }
  .nav { inset:62px 0 auto; }
  .hero-content { padding-top:140px; }
  .hero h1 { font-size:clamp(46px,14vw,72px); }
  .project-meta { padding:20px; }
  .contact-form-grid { grid-template-columns:1fr; gap:18px; }
  .project-title { font-size:21px; }
  .location-grid { gap:10px; }
  .location-grid div:nth-child(n) { padding:17px 14px; }
  .location-grid strong { font-size:17px; }
  .footer-row { margin-top:64px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.project,.project-media img{transition:none}.ticker-track{animation:none}.ticker-group{flex-wrap:wrap;justify-content:center;gap:12px}.ticker-track{width:auto}.ticker-track span{font-size:18px;padding:0;gap:12px}.ticker-group[aria-hidden]{display:none} }


/* Thank-you page */
.thanks-page{min-height:100svh;display:grid;place-items:center;padding:100px 20px 40px;background:radial-gradient(circle at 70% 15%,rgba(237,18,32,.13),transparent 34%),var(--paper);color:var(--ink)}
.thanks-card{width:min(820px,100%);padding:clamp(34px,6vw,72px);border:1px solid var(--line);border-radius:22px;background:rgba(17,18,20,.94);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.thanks-mark{width:64px;height:64px;margin-bottom:34px;border-radius:15px}
.thanks-page .eyebrow{margin-bottom:18px}
.thanks-card h1{margin:0;max-width:760px;font-size:clamp(48px,8vw,96px);line-height:.92;letter-spacing:-.06em}
.thanks-copy{max-width:620px;margin:28px 0 0;color:var(--muted);font-size:18px;line-height:1.7}
.thanks-redirect{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}
.thanks-redirect p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.thanks-countdown{color:#fff;font-weight:800}
@media(max-width:600px){.thanks-redirect{align-items:flex-start;flex-direction:column}.thanks-card{padding:30px 24px}}


/* Where we've worked ticker */
.footprint.footprint-strip {
  overflow:hidden;
  padding:28px 0;
  background:var(--surface);
  border-block:1px solid var(--line);
}
.footprint-strip-label {
  margin:0 0 14px;
  text-align:center;
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.footprint-strip .ticker-track {
  animation-duration:42s;
}
.footprint-strip .ticker-track span {
  font-size:clamp(24px,2.7vw,38px);
}
.footprint-strip .ticker-track span::after {
  color:var(--red);
}
.footprint-strip:hover .ticker-track {
  animation-play-state:paused;
}
@media (max-width:900px) {
  .footprint.footprint-strip { padding:24px 0; }
}
@media (max-width:520px) {
  .footprint-strip .ticker-track span { font-size:22px; }
}