/* =========================================================
   ANIMAZE GRAPHIC — WORK / PORTFOLIO PAGE
   ========================================================= */

:root{
  --ink:#111216;
  --ink-2:#24262d;
  --muted:#6d7280;
  --soft:#f7f7f4;
  --cream:#fff5ef;
  --orange:#ff6752;
  --orange-dark:#e95643;
  --line:#e8e8e4;
  --white:#fff;
  --display:"Archivo",Arial,sans-serif;
  --body:"Inter Tight",Inter,system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --max:1240px;
  --gutter:24px;

  --u-heading:    clamp(1.9rem, 1.4rem + 1.9vw, 2.6rem);
  --u-subheading: clamp(1.05rem, 1rem + .3vw, 1.15rem);
  --u-copy:       0.975rem;
  --u-copy-lh:    1.7;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;background:none;border:none}
.wrap{width:100%;max-width:var(--max);margin:auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:10px;z-index:99999;
  padding:10px 16px;background:var(--ink);color:#fff
}
.skip:focus{left:12px}

/* Shared button — matches contact.html/index.html */
.hero-btn{
  min-height:44px;
  padding:0 17px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:4px;
  font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  transition:.25s ease;
}
.hero-btn--light{background:#fff;color:#15161a}
.hero-btn--light:hover{background:#17181c;color:#fff;transform:translateY(-3px)}

/* HEADER */
.work-header{
  padding:clamp(90px,10vw,120px) 0 clamp(36px,5vw,52px);
  background:#fff;
}
.work-eyebrow{
  display:inline-block;margin-bottom:14px;
  color:var(--orange-dark);font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.14em;
}
.work-header h1{
  font-family:var(--display);font-size:var(--u-heading);font-weight:800;
  line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;color:var(--ink);
}
.work-header h1 em{font-style:normal;color:var(--orange)}
.work-header p{
  max-width:560px;color:var(--muted);font-size:var(--u-copy);line-height:var(--u-copy-lh);margin:0;
}

/* FILTERS */
.work-filters{
  padding:0 0 clamp(28px,4vw,40px);
  border-bottom:1px solid var(--line);
}
.filter-row{display:flex;flex-wrap:wrap;gap:10px}
.filter-btn{
  padding:9px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--display);font-size:12.5px;font-weight:600;
  color:var(--muted);
  transition:.2s ease;
}
.filter-btn:hover{border-color:#ffd2c7;color:var(--ink)}
.filter-btn.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

/* GRID */
.work-grid-section{padding:clamp(40px,5vw,60px) 0 clamp(56px,7vw,88px)}
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.work-card{
  display:block;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:.25s ease;
}
.work-card:hover{
  transform:translateY(-5px);
  border-color:#ffd2c7;
  box-shadow:0 20px 40px rgba(17,18,22,.07);
}
.work-card__media{
  height:190px;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:#fff;
}
.work-card__media--1{background:linear-gradient(135deg,#ff8a75,var(--orange))}
.work-card__media--2{background:linear-gradient(135deg,#2b2d33,var(--ink))}
.work-card__media--3{background:linear-gradient(135deg,#ffb199,#ff7a63)}
.work-card__media--4{background:linear-gradient(135deg,#3d3f47,#17181c)}
.work-card__media--5{background:linear-gradient(135deg,#ff6752,#e95643)}
.work-card__media--6{background:linear-gradient(135deg,#4a4d56,#24262d)}

.work-card__body{padding:22px}
.work-card__tag{
  display:inline-block;margin-bottom:10px;
  color:var(--orange-dark);font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
}
.work-card h3{
  font-family:var(--display);font-size:var(--u-subheading);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;
}
.work-card p{
  color:var(--muted);font-size:13.5px;line-height:1.55;margin:0;
}

.work-empty{
  text-align:center;color:var(--muted);font-size:14px;
  padding:60px 0;margin:0;
}

/* CTA */
.work-cta{
  padding:clamp(56px,7vw,92px) 0;
  background:var(--orange);color:#fff;text-align:center;
}
.work-cta__inner{max-width:700px;margin:auto}
.work-cta h2{
  font-family:var(--display);font-size:var(--u-heading);font-weight:800;
  line-height:1.15;letter-spacing:-.02em;margin:0 0 28px;
}
.work-cta h2 em{font-style:normal;color:#17181c}

/* RESPONSIVE */
@media(max-width:900px){
  .work-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  :root{--gutter:18px}
  .work-header{padding:80px 0 30px}
  .work-grid{grid-template-columns:1fr}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .filter-btn{flex:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}