:root {
  --services-ink:#10100f;
  --services-paper:#f7f7f4;
  --services-line:#d8d6cf;
  --services-gold:#ffc107;
  --services-muted:#6c6962;
  --services-ease:cubic-bezier(.23,1,.32,1);
}

body.services-page { overflow-x:hidden; background:var(--services-ink); color:#fff; }
.services-page main { padding-top:82px; }
.services-page .nav { position:fixed; }
.services-page .nav-links a[aria-current="page"] { color:var(--services-gold); }

.services-hero { padding:clamp(68px,8vw,118px) 0 clamp(58px,7vw,94px); border-bottom:1px solid var(--services-line); background:var(--services-ink); color:#fff; }
.services-hero-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); align-items:end; gap:clamp(40px,8vw,120px); }
.services-kicker { margin:0 0 22px; color:#a6a39b; font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.services-hero .services-kicker { color:var(--services-gold); }
.services-hero h1 { max-width:900px; margin:0; font-size:clamp(48px,6.4vw,94px); font-weight:700; letter-spacing:-.055em; line-height:.91; }
.services-hero h1 span { color:var(--services-gold); font-weight:400; }
.services-hero-copy { padding-bottom:8px; }
.services-hero-copy p { margin:0; color:#ceccc5; font-size:clamp(17px,1.35vw,21px); line-height:1.62; }
.services-hero-copy a { display:inline-flex; align-items:center; gap:20px; margin-top:34px; border-bottom:1px solid rgba(255,255,255,.42); padding-bottom:9px; color:#fff; font-size:14px; font-weight:700; letter-spacing:.055em; text-decoration:none; transition:border-color 180ms ease,color 180ms ease,transform 160ms var(--services-ease); }
.services-hero-copy a:active { transform:scale(.97); }

.services-library { padding:clamp(72px,8vw,112px) 0 clamp(80px,9vw,136px); background:var(--services-ink); color:#fff; }
.library-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }
.library-heading .services-kicker { margin-bottom:12px; }
.library-heading h2,.services-process h2 { margin:0; font-size:clamp(38px,4.7vw,68px); font-weight:700; letter-spacing:-.045em; line-height:.95; }
.library-count { margin:0 0 5px; color:#aaa79f; font-size:14px; }
.library-count strong { color:#fff; font-size:28px; }

.project-filters { position:relative; z-index:1; display:grid; grid-template-columns:minmax(310px,1.5fr) repeat(3,minmax(128px,.72fr)) auto; align-items:end; gap:0; margin-bottom:52px; border-block:1px solid rgba(255,255,255,.2); background:#10100f; }
.project-filters fieldset,.filter-select { min-width:0; margin:0; padding:18px 22px; border:0; border-right:1px solid rgba(255,255,255,.18); }
.project-filters legend,.filter-select>span { display:block; margin-bottom:10px; padding:0; color:#77746d; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.filter-tabs { display:flex; gap:6px; }
.filter-tabs button { min-height:38px; border:1px solid transparent; padding:0 13px; background:transparent; color:#aaa79f; font:600 13px/1 'Montserrat',sans-serif; cursor:pointer; transition:background-color 180ms ease,color 180ms ease,transform 140ms var(--services-ease); }
.filter-tabs button.is-active { background:var(--services-gold); color:var(--services-ink); }
.filter-tabs button:active,.filter-reset:active,.services-empty button:active { transform:scale(.97); }
.filter-select select { width:100%; min-height:38px; border:0; border-bottom:1px solid #77746d; border-radius:0; background:#10100f; color:#fff; font:600 13px/1.2 'Montserrat',sans-serif; outline:none; cursor:pointer; }
.filter-select select:focus-visible { border-bottom-color:var(--services-gold); box-shadow:0 2px 0 var(--services-gold); }
.filter-reset { min-height:100%; border:0; padding:20px 22px; background:transparent; color:#fff; font:700 11px/1.3 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:color 180ms ease,transform 140ms var(--services-ease); }

.services-project-grid { columns:3; column-gap:clamp(18px,2vw,28px); }
.services-project { display:inline-block; width:100%; margin:0 0 clamp(38px,4vw,58px); break-inside:avoid; }
.services-project[hidden] { display:none; }
.services-project figure { overflow:hidden; margin:0; background:#111; }
.services-project img,.services-project video { display:block; width:100%; height:auto; }
.services-project img { transition:transform 260ms var(--services-ease),filter 220ms ease; }
.services-project video { max-height:720px; object-fit:contain; background:#050505; }
.services-project--trimmed figure { position:relative; aspect-ratio:3/4; }
.services-project--trimmed img { position:absolute; top:55.9%; left:50%; width:auto; max-width:none; height:178.6%; object-fit:contain; object-position:center; transform:translate(-50%,-50%); }
.services-project-copy { display:grid; grid-template-columns:1fr auto; gap:8px 22px; padding-top:17px; }
.services-project-copy>span { grid-column:1/-1; color:#77746d; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.services-project-copy h3 { margin:0; color:#fff; font-size:clamp(21px,1.8vw,28px); font-weight:700; letter-spacing:-.035em; line-height:1.08; }
.services-project-copy p { grid-column:1/-1; max-width:540px; margin:2px 0 0; color:#aaa79f; font-size:15px; line-height:1.6; }

.services-empty { padding:86px 20px; border-block:1px solid rgba(255,255,255,.18); text-align:center; }
.services-empty[hidden] { display:none; }
.services-empty strong { display:block; font-size:clamp(24px,3vw,38px); letter-spacing:-.035em; }
.services-empty p { margin:12px 0 28px; color:#aaa79f; font-size:16px; }
.services-empty button { min-height:48px; border:0; padding:0 22px; background:var(--services-gold); color:var(--services-ink); font:700 12px/1 'Montserrat',sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:transform 140ms var(--services-ease); }

.services-process { padding:clamp(72px,8vw,116px) 0; border-top:1px solid rgba(255,255,255,.18); background:var(--services-ink); color:#fff; }
.services-process header { display:grid; grid-template-columns:1fr 2fr; align-items:end; gap:40px; margin-bottom:48px; }
.services-process header .services-kicker { margin:0 0 6px; }
.process-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.18); }
.process-list article { min-height:280px; padding:27px 32px 34px 0; border-right:1px solid rgba(255,255,255,.18); }
.process-list article+article { padding-left:32px; }
.process-list article:last-child { border-right:0; }
.process-list article>span { color:var(--services-gold); font-size:13px; font-weight:700; letter-spacing:.14em; }
.process-list h3 { margin:64px 0 13px; font-size:clamp(27px,2.8vw,42px); letter-spacing:-.045em; }
.process-list p { max-width:330px; margin:0; color:#aaa79f; font-size:15px; line-height:1.65; }

.services-contact { padding:clamp(68px,7vw,100px) 0; background:var(--services-gold); }
.services-contact-inner { display:grid; grid-template-columns:1.2fr .8fr auto; align-items:end; gap:40px; }
.services-contact p { max-width:440px; margin:0; font-size:17px; line-height:1.55; }
.services-contact a { display:inline-flex; min-height:54px; align-items:center; gap:28px; border-bottom:2px solid var(--services-ink); color:var(--services-ink); font-size:13px; font-weight:700; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; transition:gap 180ms var(--services-ease),transform 140ms var(--services-ease); }

@media (hover:hover) and (pointer:fine) {
  .services-hero-copy a:hover { border-color:var(--services-gold); color:var(--services-gold); }
  .filter-tabs button:hover:not(.is-active) { background:rgba(255,255,255,.1); color:#fff; }
  .filter-reset:hover { color:#a87700; }
  .services-project:hover img { transform:scale(1.015); filter:brightness(1.03); }
  .services-project--trimmed:hover img { transform:translate(-50%,-50%) scale(1.015); }
  .services-contact a:hover { gap:36px; }
}

@media (max-width:980px) {
  .services-hero-grid { grid-template-columns:1fr; gap:34px; }
  .services-hero-copy { max-width:650px; }
  .project-filters { position:relative; top:auto; grid-template-columns:1fr 1fr 1fr; }
  .project-type-filter { grid-column:1/-1; }
  .project-filters fieldset { border-right:0; border-bottom:1px solid var(--services-line); }
  .filter-reset { grid-column:1/-1; min-height:52px; border-top:1px solid var(--services-line); }
  .services-project-grid { columns:2; }
  .services-contact-inner { grid-template-columns:1fr 1fr; }
  .services-contact a { grid-column:1/-1; width:max-content; }
}

@media (max-width:820px) {
  .services-page main { padding-top:74px; }
  .library-heading { align-items:start; }
  .services-process header { grid-template-columns:1fr; gap:14px; }
  .process-list { grid-template-columns:1fr; }
  .process-list article,.process-list article+article { min-height:0; padding:24px 0 30px; border-right:0; border-bottom:1px solid var(--services-line); }
  .process-list article:last-child { border-bottom:0; }
  .process-list h3 { margin:26px 0 10px; }
}

@media (max-width:620px) {
  .services-page main { padding-top:68px; }
  .services-hero { padding-top:62px; }
  .services-hero h1 { font-size:clamp(43px,13vw,62px); }
  .library-heading { display:grid; gap:18px; }
  .library-count { justify-self:start; }
  .project-filters { grid-template-columns:1fr; margin-bottom:38px; }
  .project-filters fieldset,.filter-select { grid-column:1; border-right:0; border-bottom:1px solid var(--services-line); }
  .filter-tabs { display:grid; grid-template-columns:repeat(2,1fr); }
  .filter-tabs button { padding-inline:8px; }
  .services-project-grid { columns:1; }
  .services-project { margin-bottom:42px; }
  .services-contact-inner { grid-template-columns:1fr; gap:20px; }
  .services-contact a { grid-column:auto; margin-top:10px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .services-project,.services-project img,.services-project video,.services-hero-copy a,.filter-tabs button,.filter-reset,.services-contact a { transition-duration:0ms; transform:none; }
  .services-project--trimmed img { transform:translate(-50%,-50%); }
}