/* ============================================================
   Catsville Productions — shared styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=PT+Serif:ital@1&display=swap');

:root{
  --ink:#0c0c0c;
  --ink-soft:#1a1a1a;
  --cream:#f6f2e8;
  --cream-dim:#ece6d6;
  --paper:#fbf9f3;
  --orange:#c6633c;
  --orange-dark:#a84f2d;
  --grey:#9b9589;
  --grey-light:#bdb7a9;
  --line-dark:rgba(246,242,232,0.14);
  --line-light:rgba(12,12,12,0.12);
  --maxw:1240px;
  --gutter:clamp(24px,5vw,80px);
  --ff-head:'Archivo Black', 'Inter', sans-serif;
  --ff-body:'Inter', sans-serif;
  --ff-serif:'PT Serif', serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-head); font-weight:400; letter-spacing:-0.01em; }
p{ margin:0; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  margin-bottom:18px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 34px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-solid{
  background:var(--orange);
  color:var(--ink);
}
.btn-solid:hover{ background:var(--orange-dark); color:var(--cream); }
.btn-outline-dark{
  border-color:rgba(246,242,232,0.4);
  color:var(--cream);
}
.btn-outline-dark:hover{ border-color:var(--cream); background:rgba(246,242,232,0.06); }
.btn-outline-light{
  border-color:rgba(12,12,12,0.3);
  color:var(--ink);
}
.btn-outline-light:hover{ border-color:var(--ink); background:rgba(12,12,12,0.04); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(10,10,10,0.0);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.site-header.scrolled{
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--line-dark);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:26px;
  padding-bottom:26px;
}
.logo{
  font-family:var(--ff-head);
  font-size:20px;
  letter-spacing:0.08em;
  color:var(--cream);
}
.nav-links{
  display:flex;
  gap:40px;
}
.nav-links a{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:0.82;
  position:relative;
  padding-bottom:4px;
  transition:opacity .2s ease;
}
.nav-links a:hover{ opacity:1; }
.nav-links a.active{ opacity:1; color:var(--orange); }
.nav-links a.active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--orange);
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  width:28px; height:20px;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:var(--cream);
  transition:all .25s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:var(--cream);
  padding-top:200px;
  padding-bottom:140px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-20%; right:-10%;
  width:60%; height:140%;
  background:radial-gradient(ellipse at center, rgba(198,99,60,0.14) 0%, rgba(198,99,60,0) 65%);
  pointer-events:none;
  z-index:1;
}
.hero .wrap{ position:relative; z-index:2; }

/* Animated backdrop standing in for the cycling hero videos.
   Swap in a real <video> layer (see comment in index.html) for the
   final site — this keeps the hero from feeling static in the
   meantime. */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--ink);
}
.hero-bg::before,
.hero-bg::after{
  content:'';
  position:absolute;
  width:70%;
  padding-bottom:70%;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.5;
}
.hero-bg::before{
  top:-15%; left:-10%;
  background:radial-gradient(circle, rgba(198,99,60,0.55) 0%, rgba(198,99,60,0) 70%);
  animation:hero-drift-a 22s ease-in-out infinite;
}
.hero-bg::after{
  bottom:-20%; right:-10%;
  background:radial-gradient(circle, rgba(90,70,160,0.4) 0%, rgba(90,70,160,0) 70%);
  animation:hero-drift-b 26s ease-in-out infinite;
}
@keyframes hero-drift-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6%,8%) scale(1.15); }
}
@keyframes hero-drift-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-8%,-6%) scale(1.1); }
}
.hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-video-layer video{
  width:100%; height:100%;
  object-fit:cover;
  opacity:0.55;
}
@media (prefers-reduced-motion:reduce){
  .hero-bg::before,.hero-bg::after{ animation:none; }
}
.hero h1{
  font-size:clamp(48px,9vw,128px);
  line-height:0.96;
  text-transform:uppercase;
  color:var(--cream);
}
.hero .tagline{
  font-family:var(--ff-serif);
  font-style:italic;
  font-size:clamp(20px,3vw,34px);
  color:var(--grey-light);
  margin-top:28px;
  margin-bottom:48px;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- Section base ---------- */
section{ position:relative; }
.section-dark{ background:var(--ink); color:var(--cream); }
.section-light{ background:var(--paper); color:var(--ink); }
.section-pad{ padding-top:120px; padding-bottom:120px; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:64px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(34px,5.5vw,64px);
  text-transform:uppercase;
  line-height:1;
}
.section-head p{
  max-width:360px;
  color:var(--grey);
  font-size:15px;
  line-height:1.6;
}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:start;
}
.about-copy p{
  font-size:18px;
  line-height:1.8;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  border-top:1px solid var(--line-light);
  padding-top:36px;
}
.stat-num{
  font-family:var(--ff-head);
  font-size:42px;
  color:var(--orange);
  margin-bottom:6px;
}
.stat-label{
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
}

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.service-card{
  background:var(--ink);
  padding:48px 40px;
  transition:background .25s ease;
}
.service-card:hover{ background:#161616; }
.service-icon{
  width:44px; height:44px;
  margin-bottom:28px;
  color:var(--orange);
}
.service-icon svg{ width:100%; height:100%; }
.service-card h3{
  font-family:var(--ff-body);
  font-weight:800;
  font-size:22px;
  margin-bottom:14px;
  text-transform:none;
}
.service-card p{
  color:var(--grey);
  font-size:15px;
  line-height:1.7;
}

/* ---------- Work / Portfolio shared ---------- */
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.filter-btn{
  padding:12px 22px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1px solid var(--line-light);
  background:transparent;
  color:inherit;
  transition:all .2s ease;
}
.section-dark .filter-btn{ border-color:var(--line-dark); color:var(--cream); }
.filter-btn:hover{ border-color:var(--orange); color:var(--orange); }
.filter-btn.active{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--ink);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:56px;
}

/* ---------- Featured Work (alternating layout, portfolio page) ---------- */
.featured-heading{
  font-size:clamp(28px,4vw,42px);
  margin-bottom:48px;
}
.featured-list{ display:flex; flex-direction:column; gap:96px; }
.featured-item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.featured-item.reverse{ direction:rtl; }
.featured-item.reverse > *{ direction:ltr; }
.featured-media{
  aspect-ratio:4/3;
  overflow:hidden;
  position:relative;
  border:1px solid transparent;
  transition:border-color .3s ease;
  cursor:pointer;
}
.featured-media:hover{ border-color:var(--orange); }
.featured-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.featured-media:hover img{ transform:scale(1.06); }
.featured-content .work-tag{ display:block; }
.featured-content h3{
  font-family:var(--ff-head);
  font-size:clamp(26px,3.4vw,40px);
  margin-top:10px;
  text-transform:none;
}
.featured-content p{
  color:var(--grey);
  font-size:15px;
  line-height:1.75;
  margin-top:18px;
  max-width:480px;
}
@media (max-width:860px){
  .featured-item, .featured-item.reverse{ grid-template-columns:1fr; direction:ltr; }
}
.work-card{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.work-thumb{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#1c1c1c;
  position:relative;
  border:1px solid transparent;
  transition:border-color .3s ease;
}
.work-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.work-card:hover .work-thumb{ border-color:var(--orange); }
.work-card:hover .work-thumb img{ transform:scale(1.06); }
.work-meta{ padding-top:18px; }
.work-tag{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
}
.work-title{
  font-family:var(--ff-head);
  font-size:20px;
  margin-top:8px;
  text-transform:none;
}
.work-desc{
  color:var(--grey);
  font-size:14px;
  line-height:1.6;
  margin-top:10px;
}
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chip{
  font-size:11px;
  padding:5px 12px;
  border:1px solid var(--line-light);
  color:var(--grey);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.section-dark .chip{ border-color:var(--line-dark); }

.center-cta{ text-align:center; margin-top:64px; }

/* ---------- Team ---------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.team-card{}
.team-photo{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#1c1c1c;
}
.team-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, filter .4s ease;
}
.team-card:hover .team-photo img{ transform:scale(1.05); }

/* Home-page team preview: grayscale photos that soften slightly on hover */
.team-mono .team-photo img{ filter:grayscale(1) contrast(1.05); }
.team-mono .team-card:hover .team-photo img{ filter:grayscale(0.1); }

.team-info{ padding-top:22px; }
.team-name{
  font-family:var(--ff-head);
  font-size:22px;
  text-transform:none;
}
.team-role{
  color:var(--orange);
  font-size:13px;
  font-weight:600;
  margin-top:8px;
  line-height:1.5;
}
.team-role-upper{ text-transform:uppercase; letter-spacing:0.06em; }
.team-bio{
  color:var(--grey);
  font-size:14px;
  line-height:1.7;
  margin-top:12px;
}
.team-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.team-social{ display:flex; gap:10px; margin-top:18px; }
.team-social a{
  width:36px; height:36px;
  border:1px solid var(--line-dark);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
}
.team-social a svg{ width:16px; height:16px; }
.team-social a:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.section-light .team-social a{ border-color:var(--line-light); color:var(--ink); }

/* Home-page hover overlay: dark scrim + two square orange icon buttons */
.team-hover-social{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:rgba(12,12,12,0.68);
  opacity:0; transition:opacity .35s ease;
}
.team-card:hover .team-hover-social{ opacity:1; }
.team-hover-social a{
  width:52px; height:52px;
  background:var(--orange);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(10px);
  transition:transform .35s ease, background .2s ease;
}
.team-card:hover .team-hover-social a{ transform:translateY(0); }
.team-hover-social a:hover{ background:var(--cream); }
.team-hover-social a svg{ width:20px; height:20px; }

/* team.html hover overlay: warm orange-tinted scrim + "View Profile" */
.team-view-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(198,99,60,0.15), rgba(198,99,60,0.82));
  opacity:0; transition:opacity .35s ease;
}
.team-card:hover .team-view-overlay{ opacity:1; }
.team-view-overlay span{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  transform:translateY(10px);
  transition:transform .35s ease;
}
.team-card:hover .team-view-overlay span{ transform:translateY(0); }
.team-view-overlay svg{ width:18px; height:18px; }

/* team.html minimal header */
.header-minimal{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px var(--gutter);
}
.header-minimal .logo{ font-size:15px; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:72px;
}
.contact-grid h2{
  font-size:clamp(36px,5vw,58px);
  text-transform:none;
  line-height:1.05;
  margin-bottom:24px;
}
.contact-grid > div:first-child > p{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:440px;
  margin-bottom:48px;
}
.contact-info-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:28px;
}
.contact-info-icon{
  width:44px; height:44px;
  flex:none;
  background:var(--orange);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.contact-info-icon svg{ width:20px; height:20px; }
.contact-info-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--grey);
  margin-bottom:4px;
}
.contact-info-value{ font-size:16px; line-height:1.6; }
.contact-info-value a{ color:inherit; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; }
.contact-info-value a:hover{ color:var(--orange); border-color:var(--orange); }
.social-row{ display:flex; gap:12px; margin-top:36px; }
.social-link{
  width:44px; height:44px;
  border:1px solid var(--line-light);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
}
.social-link:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.social-link svg{ width:18px; height:18px; }

.form-field{ margin-bottom:26px; }
.form-field label{
  display:block;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:10px;
}
.form-field input,
.form-field textarea{
  width:100%;
  padding:16px 18px;
  border:1px solid var(--line-light);
  background:var(--cream);
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  resize:vertical;
}
.form-field textarea{ min-height:140px; }
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--orange);
}
.form-note{
  font-size:13px;
  color:var(--grey);
  margin-top:14px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--paper);
  border-top:1px solid var(--line-light);
  padding-top:40px;
  padding-bottom:40px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.footer-logo{
  font-family:var(--ff-head);
  font-size:18px;
  letter-spacing:0.06em;
}
.footer-copy{ font-size:13px; color:var(--grey); }

/* ---------- Sub-page hero ---------- */
.page-hero{
  background:var(--ink);
  color:var(--cream);
  padding-top:160px;
  padding-bottom:64px;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:0.8;
  margin-bottom:40px;
}
.back-link:hover{ opacity:1; color:var(--orange); }
.page-hero h1{
  font-size:clamp(36px,6vw,72px);
  text-transform:uppercase;
}
.page-hero h1.mixed-case{ text-transform:none; }
.page-hero p.lead{
  max-width:620px;
  color:var(--grey);
  font-size:16px;
  line-height:1.7;
  margin-top:20px;
}
.header-minimal + .page-hero{ padding-top:64px; }

/* ---------- CTA strip (dark) ---------- */
.cta-strip{
  text-align:center;
  padding-top:140px;
  padding-bottom:140px;
}
.cta-strip h2{
  font-size:clamp(32px,5vw,56px);
  text-transform:none;
  margin-bottom:20px;
}
.cta-strip p{
  color:var(--grey);
  font-size:17px;
  max-width:520px;
  margin:0 auto 40px;
}

/* ---------- Scroll progress bar ---------- */
.progress-bar{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--orange), #e8905f);
  z-index:999;
  transition:width .08s linear;
}

/* ---------- Custom cursor ---------- */
.cursor-dot,
.cursor-ring{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:998;
  border-radius:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{
  width:8px; height:8px;
  background:#ffffff;
  transition:width .18s ease, height .18s ease, opacity .2s ease;
}
.cursor-ring{
  width:34px; height:34px;
  border:1px solid #ffffff;
  transition:width .22s ease, height .22s ease, opacity .2s ease, border-color .2s ease;
}
.cursor-ring.hover{ width:64px; height:64px; }
.cursor-dot.hover{ width:4px; height:4px; }
body.cursor-active, body.cursor-active a, body.cursor-active button{ cursor:none; }
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none !important; }
}

/* ---------- Work card: hover play button ---------- */
.work-card{ position:relative; }
.work-thumb{ position:relative; }
.work-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,10,10,0);
  opacity:0;
  transition:opacity .3s ease, background .3s ease;
}
.work-card:hover .work-play{
  opacity:1;
  background:rgba(10,10,10,0.28);
}
.work-play-btn{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  transform:scale(0.7);
  transition:transform .3s ease;
}
.work-card:hover .work-play-btn{ transform:scale(1); }
.work-play-btn svg{ width:22px; height:22px; margin-left:3px; fill:#fff; }

/* ---------- Lightbox ---------- */
.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,8,8,0.82);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  z-index:500;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-box{
  background:var(--ink);
  color:var(--cream);
  max-width:1000px;
  width:100%;
  max-height:86vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  transform:translateY(24px);
  transition:transform .35s ease;
}
.lightbox-overlay.open .lightbox-box{ transform:translateY(0); }
.lightbox-media{
  background:#111;
  overflow:hidden;
}
.lightbox-media img{ width:100%; height:100%; object-fit:cover; }
.lightbox-info{
  padding:52px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lightbox-tag{
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  margin-bottom:18px;
}
.lightbox-title{
  font-family:var(--ff-head);
  font-size:clamp(26px,3vw,38px);
  text-transform:none;
  margin-bottom:20px;
}
.lightbox-desc{
  color:var(--grey);
  font-size:15px;
  line-height:1.7;
  margin-bottom:32px;
}
.lightbox-close{
  position:absolute;
  top:28px; right:28px;
  width:44px; height:44px;
  background:var(--orange);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.lightbox-close svg{ width:18px; height:18px; }
@media (max-width:760px){
  .lightbox-box{ grid-template-columns:1fr; overflow-y:auto; }
  .lightbox-media{ height:240px; }
  .lightbox-info{ padding:36px 28px; }
}

/* ---------- reveal animation ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .services-grid, .work-grid, .team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:78vw;
    max-width:320px;
    background:var(--ink);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:28px;
    padding:0 40px;
    transform:translateX(100%);
    transition:transform .35s ease;
    border-left:1px solid var(--line-dark);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .services-grid, .work-grid, .team-grid{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .hero{ padding-top:150px; }
  .section-pad{ padding-top:80px; padding-bottom:80px; }
}