/*
Theme Name: Rolen Works
Theme URI: https://rolenworks.id/
Author: Rolen Works
Author URI: https://rolenworks.id/
Description: Custom editable WordPress theme for Rolen Works — Strategic Commercial Production House.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rolen-works
Tags: portfolio, photography, videography, business, custom-colors, custom-logo, featured-images
*/

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #080808;
  --black2: #111111;
  --black3: #181818;
  --white: #F2F0EB;
  --white-dim: rgba(242,240,235,0.55);
  --white-faint: rgba(242,240,235,0.12);
  --red: #D92B2B;
  --red-hover: #B82323;
  --green: #3A7D44;
  --green-light: #4E9A5A;
  --yellow: #D4A017;
  --yellow-light: #E8B52A;
  --border: rgba(255,255,255,0.08);
  --border-mid: rgba(255,255,255,0.14);
  --gutter: 80px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ---- CURSOR ---- */
#cur { width:8px; height:8px; background:var(--red); border-radius:50%; position:fixed; top:0;left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .25s,height .25s; }
#cur-ring { width:34px; height:34px; border:1px solid rgba(217,43,43,.45); border-radius:50%; position:fixed; top:0;left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:all .12s ease; }

/* ---- NAV ---- */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  padding: 26px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(to bottom, rgba(8,8,8,.95) 0%, transparent 100%);
}
.nav-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 17px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
}
.nav-logo span { color: var(--red); }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--white-dim); text-decoration:none; transition:color .25s;
  font-weight: 500;
}
.nav-links a:hover { color:var(--white); }
.nav-cta {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white); background:var(--red);
  border:none; padding:11px 24px; cursor:none;
  transition:background .25s;
}
.nav-cta:hover { background:var(--red-hover); }

/* ---- HERO ---- */
.hero {
  min-height: 100vh;
  padding: 140px var(--gutter) 80px;
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  overflow: hidden;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); font-weight:600; margin-bottom:28px;
}
.hero-eyebrow::after { content:''; flex:1; height:1px; background:var(--red); opacity:.4; max-width:60px; }

.hero-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 13vw, 180px);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--white);
  position: relative;
  z-index: 2;
}
.hero-headline .accent-red { color:var(--red); }

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-top: 52px;
}
.hero-sub {
  font-size: 15px; line-height:1.75; color:var(--white-dim);
  max-width: 400px;
}
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn-red {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--white); background:var(--red);
  border:none; padding:14px 32px; cursor:none;
  transition:background .25s, transform .2s; text-decoration:none; display:inline-block;
}
.btn-red:hover { background:var(--red-hover); transform:translateY(-2px); }
.btn-ghost {
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--white); background:transparent;
  border:1px solid var(--border-mid); padding:13px 28px; cursor:none;
  transition:border-color .25s; text-decoration:none; display:inline-block;
}
.btn-ghost:hover { border-color:var(--white-dim); }

/* Hero portfolio montage */
.hero-montage {
  position: absolute;
  right: var(--gutter); bottom: 0;
  display: flex; align-items: flex-end; gap:14px;
  height: 75vh;
  z-index: 1;
}
.montage-card {
  position: relative; overflow:hidden; border-radius:3px;
  flex-shrink:0;
}
.montage-card img {
  display:block; object-fit:cover; width:100%; height:100%;
  filter: brightness(.7) saturate(.85);
  transition:filter .5s;
}
.montage-card:hover img { filter:brightness(.85) saturate(1); }
.montage-card:nth-child(1) { width:180px; height:55%; align-self:flex-end; }
.montage-card:nth-child(2) { width:210px; height:78%; }
.montage-card:nth-child(3) { width:160px; height:42%; align-self:flex-end; }
.montage-label {
  position:absolute; bottom:12px; left:12px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:500;
}
.hero-overlay {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 60%, rgba(217,43,43,.07) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}

/* ---- TICKER ---- */
.ticker {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:16px 0; overflow:hidden; white-space:nowrap;
}
.ticker-track {
  display:inline-flex; gap:52px;
  animation:marquee 20s linear infinite;
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,240,235,.3);
  display:flex; align-items:center; gap:20px;
}
.ticker-dot { width:4px; height:4px; border-radius:50%; background:var(--red); }

/* ---- ABOUT ---- */
.about {
  padding: 120px var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}
.section-num {
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red); font-weight:700; margin-bottom:20px;
  font-family:'Space Grotesk',sans-serif;
}
.about-statement {
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(38px, 4.5vw, 58px);
  line-height:1.0;
  color:var(--white);
}
.about-right { padding-top:8px; }
.about-desc {
  font-size:15px; line-height:1.8; color:var(--white-dim);
  margin-bottom:36px;
}
.pillars { display:flex; flex-direction:column; gap:0; }
.pillar {
  display:flex; align-items:center; gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.06em;
}
.pillar:first-child { border-top:1px solid var(--border); }
.pillar-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }

/* ---- WORKS ---- */
.works { padding: 0 var(--gutter) 120px; }
.section-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:48px;
  border-top:1px solid var(--border); padding-top:40px;
}
.section-title {
  font-family:'Bebas Neue',sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  line-height:1.0; color:var(--white);
  margin-top:10px;
}
.section-sub { font-size:13px; color:var(--white-dim); margin-top:6px; }
.filter-tabs { display:flex; gap:4px; flex-wrap:wrap; }
.filter-tab {
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white-dim); background:transparent;
  border:1px solid var(--border); padding:8px 16px;
  cursor:none; transition:all .22s;
}
.filter-tab.active, .filter-tab:hover { color:var(--white); border-color:var(--white-dim); background:var(--black3); }
.filter-tab.active { border-color:var(--red); color:var(--red); background:rgba(217,43,43,.08); }

.works-grid {
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap:3px;
}
.work-card {
  position:relative; overflow:hidden; cursor:none;
  background:var(--black3);
}
.work-card img {
  width:100%; display:block; object-fit:cover;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
  filter:brightness(.65) saturate(.8);
}
.work-card:hover img { transform:scale(1.05); filter:brightness(.8) saturate(1.05); }
.wc-1 { grid-row:1/3; }
.wc-1 img { height:580px; }
.wc-2 img { height:285px; }
.wc-3 img { height:285px; }
.wc-4 img { height:285px; }
.wc-5 img { height:285px; }

.work-overlay {
  position:absolute; inset:0;
  background:linear-gradient(transparent 40%, rgba(0,0,0,.88));
  opacity:0; transition:opacity .4s;
}
.work-card:hover .work-overlay { opacity:1; }
.work-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:20px; transform:translateY(8px); opacity:0;
  transition:all .4s ease;
}
.work-card:hover .work-info { transform:translateY(0); opacity:1; }
.work-cat-badge {
  display:inline-block;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; font-family:'Space Grotesk',sans-serif;
  color:var(--red); border:1px solid var(--red);
  padding:3px 8px; margin-bottom:8px;
}
.work-name { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; }
.work-meta { font-size:11px; color:var(--white-dim); margin-top:4px; letter-spacing:.05em; }
.work-arrow-btn {
  position:absolute; top:16px; right:16px;
  width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s, border-color .3s;
}
.work-card:hover .work-arrow-btn { opacity:1; border-color:var(--red); }
.work-arrow-btn svg { width:14px; height:14px; stroke:var(--white); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- SERVICES ---- */
.services {
  padding: 120px var(--gutter);
  background: var(--black2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.services-header { margin-bottom:64px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.service-card {
  background:var(--black2); padding:44px 36px;
  position:relative; overflow:hidden;
  transition:background .3s;
}
.service-card:hover { background:var(--black3); }
.service-card-num {
  font-family:'Bebas Neue',sans-serif; font-size:64px;
  color:rgba(255,255,255,.04); position:absolute;
  top:-8px; right:24px; line-height:1; pointer-events:none;
}
.service-num-label {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); margin-bottom:18px;
}
.service-name {
  font-family:'Bebas Neue',sans-serif; font-size:30px;
  line-height:1.05; color:var(--white); margin-bottom:24px;
}
.service-items { list-style:none; margin-bottom:32px; }
.service-items li {
  font-size:13px; color:var(--white-dim); padding:7px 0;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.service-items li::before { content:'—'; color:var(--yellow); font-size:10px; flex-shrink:0; }
.service-explore {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); text-decoration:none;
  display:flex; align-items:center; gap:8px;
  transition:gap .25s;
}
.service-explore:hover { gap:14px; }

/* ---- PROCESS ---- */
.process { padding: 120px var(--gutter); }
.process-top {
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:start; margin-bottom:72px;
}
.why-list { margin-top:20px; }
.why-item {
  display:grid; grid-template-columns:32px 1fr;
  gap:14px; padding:18px 0; border-bottom:1px solid var(--border);
  align-items:start;
}
.why-item:first-child { border-top:1px solid var(--border); }
.why-num { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px; letter-spacing:.2em; color:var(--red); padding-top:2px; }
.why-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; margin-bottom:5px; }
.why-desc { font-size:12px; color:var(--white-dim); line-height:1.6; }

.process-label { font-size:12px; color:var(--white-dim); margin-bottom:24px; font-family:'Space Grotesk',sans-serif; }
.process-steps { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--border); }
.process-step {
  background:var(--black); padding:28px 20px;
  position:relative;
}
.process-step-num {
  font-family:'Bebas Neue',sans-serif; font-size:40px;
  color:rgba(255,255,255,.06); line-height:1; margin-bottom:12px;
}
.process-step-name {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.06em; color:var(--white);
  margin-bottom:6px;
}
.process-step-line {
  width:24px; height:2px; background:var(--red); margin-bottom:10px;
}
.process-step-desc { font-size:11px; color:var(--white-dim); line-height:1.6; }

/* ---- CATEGORIES ---- */
.categories {
  padding: 80px var(--gutter);
  background:var(--black2);
  border-top:1px solid var(--border);
}
.cat-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border);
  margin-top:48px;
}
.cat-item {
  background:var(--black2); padding:28px 24px;
  display:flex; align-items:center; gap:14px;
  transition:background .25s;
  cursor:none;
}
.cat-item:hover { background:var(--black3); }
.cat-icon { width:36px; height:36px; border:1px solid var(--border-mid); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cat-icon svg { width:16px; height:16px; stroke:var(--yellow); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cat-name { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; letter-spacing:.03em; }

/* ---- TRUST ---- */
.trust { padding:72px var(--gutter); border-top:1px solid var(--border); }
.trust-inner { display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:center; }
.trust-metrics { display:flex; flex-direction:column; gap:32px; }
.metric-num {
  font-family:'Bebas Neue',sans-serif; font-size:56px; line-height:1;
  color:var(--white);
}
.metric-num span { color:var(--red); }
.metric-label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--white-dim); margin-top:4px; font-family:'Space Grotesk',sans-serif; }
.clients-wrap {}
.clients-label { font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--white-dim); margin-bottom:24px; font-family:'Space Grotesk',sans-serif; font-weight:600; }
.clients-logos {
  display:flex; flex-wrap:wrap; gap:0;
}
.client-logo-item {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.18); padding:18px 28px;
  border:1px solid var(--border);
  transition:color .3s;
  cursor:none;
}
.client-logo-item:hover { color:rgba(255,255,255,.5); }

/* ---- CTA ---- */
.cta-section {
  padding:140px var(--gutter);
  background:var(--red);
  position:relative; overflow:hidden;
}
.cta-bg-word {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Bebas Neue',sans-serif; font-size:clamp(160px,22vw,300px);
  color:rgba(0,0,0,.12); white-space:nowrap; pointer-events:none;
  user-select:none; line-height:1;
}
.cta-inner { position:relative; z-index:1; }
.cta-eyebrow { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.65); font-weight:600; font-family:'Space Grotesk',sans-serif; margin-bottom:18px; }
.cta-headline {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,7vw,96px); line-height:.95;
  color:var(--white); margin-bottom:36px;
}
.cta-sub { font-size:14px; line-height:1.75; color:rgba(255,255,255,.75); max-width:540px; margin-bottom:44px; }
.cta-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn-white {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); background:var(--white);
  border:none; padding:14px 36px; cursor:none;
  transition:background .25s; text-decoration:none; display:inline-block;
}
.btn-white:hover { background:#e0ddd6; }
.btn-ghost-white {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white); background:transparent;
  border:1.5px solid rgba(255,255,255,.45); padding:13px 28px; cursor:none;
  transition:border-color .25s; text-decoration:none; display:inline-block;
}
.btn-ghost-white:hover { border-color:var(--white); }

/* ---- FOOTER ---- */
footer {
  background:var(--black);
  border-top:1px solid var(--border);
  padding:52px var(--gutter) 36px;
}
.footer-top {
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:48px;
  padding-bottom:40px;
  border-bottom:1px solid var(--border);
}
.footer-logo {
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:20px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); margin-bottom:12px;
}
.footer-logo span { color:var(--red); }
.footer-tagline { font-size:12px; color:var(--white-dim); line-height:1.6; }
.footer-col-label {
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--white-dim); font-weight:700; font-family:'Space Grotesk',sans-serif;
  margin-bottom:18px;
}
.footer-links-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-links-list a {
  font-size:13px; color:rgba(242,240,235,.5); text-decoration:none;
  transition:color .25s; font-weight:400;
}
.footer-links-list a:hover { color:var(--white); }
.footer-contact-item { font-size:13px; color:rgba(242,240,235,.5); margin-bottom:10px; }
.footer-contact-item a { color:inherit; text-decoration:none; transition:color .25s; }
.footer-contact-item a:hover { color:var(--white); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.footer-copy { font-size:11px; color:rgba(242,240,235,.3); letter-spacing:.06em; }
.footer-social { display:flex; gap:24px; }
.footer-social a {
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,240,235,.35); text-decoration:none; transition:color .25s;
  font-weight:600; font-family:'Space Grotesk',sans-serif;
}
.footer-social a:hover { color:var(--white); }

/* ---- UTILS ---- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s} .d5{transition-delay:.4s} .d6{transition-delay:.48s}

/* ---- MOBILE ---- */
@media(max-width:960px){
  :root{--gutter:24px;}
  nav{padding:18px 24px;}
  .nav-links{display:none;}
  .hero{padding:120px 24px 60px;}
  .hero-bottom{grid-template-columns:1fr;}
  .hero-montage{display:none;}
  .about{grid-template-columns:1fr;gap:36px;padding:72px 24px;}
  .works-grid{grid-template-columns:1fr;}
  .wc-1{grid-row:auto;} .wc-1 img,.wc-2 img,.wc-3 img,.wc-4 img,.wc-5 img{height:260px;}
  .services-grid{grid-template-columns:1fr;}
  .process-top{grid-template-columns:1fr;gap:36px;}
  .process-steps{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .trust-inner{grid-template-columns:1fr;}
  .trust-metrics{flex-direction:row;flex-wrap:wrap;gap:24px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .cta-section{padding:80px 24px;}
}
@media(max-width:580px){
  .process-steps{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .trust-metrics{flex-direction:column;}
}

/* WordPress compatibility */
.admin-bar nav{top:32px;}
.wp-caption,.wp-caption-text,.sticky,.gallery-caption,.bypostauthor{max-width:100%;}
.screen-reader-text{position:absolute;left:-9999px;}
@media(max-width:782px){.admin-bar nav{top:46px;}}

/* ---- WORDPRESS PROJECT PAGES ---- */
a.work-card { color: inherit; text-decoration: none; display: block; }

.page-hero,
.archive-hero {
  min-height: 58vh;
  padding: 160px var(--gutter) 80px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at 70% 20%, rgba(217,43,43,.10) 0%, transparent 58%), var(--black);
}
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(70px, 11vw, 150px);
  line-height: .9;
  color: var(--white);
}
.page-sub {
  max-width: 640px;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--white-dim);
}
.archive-projects,
.more-projects {
  padding: 100px var(--gutter);
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.project-grid-archive {
  grid-template-columns: repeat(3, 1fr);
}
.project-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--black2);
  overflow: hidden;
  transition: background .25s, transform .25s;
}
.project-card:hover {
  background: var(--black3);
  transform: translateY(-4px);
}
.project-card-img {
  height: 320px;
  overflow: hidden;
  background: var(--black3);
}
.project-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.72) saturate(.86);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
}
.project-card:hover .project-card-img img {
  transform: scale(1.05);
  filter: brightness(.88) saturate(1.02);
}
.project-card-body {
  padding: 24px;
}
.project-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  line-height: 1.25;
  margin: 12px 0 8px;
  color: var(--white);
}
.project-card-meta {
  font-size: 12px;
  line-height: 1.7;
  color: var(--white-dim);
}
.project-pagination {
  margin-top: 48px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-pagination a,
.project-pagination span {
  color: var(--white-dim);
  text-decoration: none;
  margin-right: 14px;
}
.project-pagination .current,
.project-pagination a:hover { color: var(--red); }

.single-project-hero {
  padding: 150px var(--gutter) 80px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: end;
  min-height: 86vh;
  border-bottom: 1px solid var(--border);
}
.single-project-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(58px, 8vw, 120px);
  line-height: .92;
  margin-top: 18px;
  color: var(--white);
}
.single-project-excerpt {
  margin-top: 24px;
  max-width: 520px;
  color: var(--white-dim);
  font-size: 15px;
  line-height: 1.8;
}
.single-project-image {
  height: 68vh;
  min-height: 420px;
  overflow: hidden;
  background: var(--black3);
}
.single-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.82) saturate(.92);
}
.project-detail-section {
  padding: 100px var(--gutter);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.project-detail-meta {
  border-top: 1px solid var(--border);
}
.project-detail-meta div {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.project-detail-meta span {
  display: block;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  margin-bottom: 6px;
}
.project-detail-meta strong {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--white);
  font-weight: 500;
}
.project-content {
  max-width: 820px;
  color: var(--white-dim);
  font-size: 16px;
  line-height: 1.9;
}
.project-content h2,
.project-content h3,
.project-content h4 {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--white);
  line-height: 1.25;
  margin: 36px 0 14px;
}
.project-content p,
.project-content ul,
.project-content ol { margin-bottom: 18px; }
.project-content a { color: var(--red); }
.project-content img { max-width: 100%; height: auto; }
.more-projects { border-top: 1px solid var(--border); }

@media(max-width:960px){
  .page-hero,.archive-hero{padding:130px 24px 60px;min-height:50vh;}
  .archive-projects,.more-projects{padding:72px 24px;}
  .project-grid,.project-grid-archive{grid-template-columns:1fr 1fr;}
  .single-project-hero{grid-template-columns:1fr;padding:130px 24px 60px;min-height:auto;gap:36px;}
  .single-project-image{height:420px;min-height:320px;}
  .project-detail-section{grid-template-columns:1fr;padding:72px 24px;gap:36px;}
}
@media(max-width:580px){
  .project-grid,.project-grid-archive{grid-template-columns:1fr;}
  .project-card-img{height:260px;}
  .single-project-image{height:320px;}
}