/* =========================================================================
   Mud Films — shared styles for every page.
   Every page loads this one file, so a change here shows up everywhere.
   Sections used by a single page are labeled with that page's name.
   ========================================================================= */

:root{
  --black:#020000;
  --ink:#151515;
  --charcoal:#2E2E2E;
  --offwhite:#F5F5F0;
  --paper:#FFFFFF;
  --line:#E6E6E0;
  --muted:#7A7A7A;
  --muted-2:#9A9A94;
  --error:#A4161A;
  --shadow:0 6px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  --font-display:'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body:'Courier Prime', 'Courier New', Courier, monospace;

  /* The header is built to exactly these heights, and the hero uses them to
     start just below it. If the header changes size, change these too. */
  --header-h:196px;            /* desktop: 8px top + 140px logo + 48px menu row */
  --header-h-collapsed:80px;   /* desktop, after scrolling down */
  --hero-gap:clamp(1.5rem, 4vw, 3rem);
  --scroll-offset:96px;        /* room for the collapsed header when jumping to a spot */
}
@media (max-width:992px){
  :root{ --header-h:92px; --scroll-offset:108px; }   /* phones and tablets: 10px + 72px logo + 10px */
}

/* ==================== Base ==================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:var(--scroll-offset);   /* keeps links and form errors out from under the fixed header */
}
body{
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
  background:var(--offwhite);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:2000;
  background:var(--offwhite); color:var(--black); padding:10px 16px;
  font-weight:700; text-decoration:none; border:2px solid var(--black);
}
.skip-link:focus{ top:12px; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{ outline:3px solid var(--black); outline-offset:3px; }
.header-sticky :focus-visible, .full-overlay-menu :focus-visible, footer :focus-visible{ outline-color:var(--offwhite); }

/* ==================== Header ==================== */
.header-sticky{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  background:var(--black);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center;
  padding:8px 20px 0;
  transition:height .25s ease, padding .25s ease;
}
.header-main{ width:100%; display:flex; justify-content:center; align-items:center; }
.logo{
  display:block; width:350px; height:140px;
  background:url('/images/logo-header.webp') center/contain no-repeat;
  transition:width .25s ease, height .25s ease;
}
.desktop-nav{ width:100%; }
.desktop-nav ul{
  display:flex; justify-content:center; align-items:center;
  gap:20px; list-style:none; height:48px;
}
.desktop-nav a{
  font-family:var(--font-body); font-size:22px; line-height:1; font-weight:700;
  text-transform:uppercase; text-decoration:none; color:var(--offwhite);
  padding:8px 5px; transition:opacity .2s;
}
.desktop-nav a:hover{ opacity:.75; }
.desktop-nav a[aria-current="page"],
.full-overlay-menu a[aria-current="page"]{
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;
}

/* Collapsed header (desktop, after scrolling) */
.header-sticky.collapsed{
  height:var(--header-h-collapsed);
  flex-direction:row; justify-content:center; gap:24px;
  padding:4px 16px;
}
.header-sticky.collapsed .header-main{ width:auto; }
.header-sticky.collapsed .logo{ width:180px; height:72px; }
.header-sticky.collapsed .desktop-nav{ width:auto; }
.header-sticky.collapsed .desktop-nav ul{ gap:18px; height:auto; }
.header-sticky.collapsed .desktop-nav a{ font-size:18px; }

/* Menu button (phones and tablets) */
.mobile-nav-toggle{
  display:none; position:relative;
  width:30px; height:25px;
  flex-direction:column; justify-content:space-around;
  background:transparent; border:none; cursor:pointer; padding:0;
}
.mobile-nav-toggle .bar{
  display:block; width:100%; height:3px;
  background:var(--offwhite); border-radius:5px;
}
.mobile-nav-label{
  position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  color:var(--offwhite); font-family:var(--font-display); font-weight:400;
  font-size:.8rem; line-height:1; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap;
}

/* Full-screen menu (phones and tablets) */
.full-overlay-menu{
  position:fixed; inset:0; z-index:1002;
  background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease-in-out, visibility .3s ease-in-out;
}
.full-overlay-menu.open{ opacity:1; visibility:visible; }
.menu-logo-container{ width:100%; margin-bottom:40px; display:flex; justify-content:center; }
.menu-logo{
  display:block; width:80%; max-width:400px; aspect-ratio:350 / 140;
  background:url('/images/logo-header.webp') center/contain no-repeat;
}
.full-overlay-menu ul{ list-style:none; width:100%; max-width:400px; text-align:center; }
.full-overlay-menu li{ margin-bottom:20px; }
.full-overlay-menu ul a{
  display:block; padding:10px 0;
  font-family:var(--font-body); font-size:clamp(24px, 6vw, 32px); font-weight:700;
  text-decoration:none; color:var(--offwhite); transition:opacity .2s;
}
.full-overlay-menu ul a:hover{ opacity:.75; }
.close-menu{
  position:absolute; top:15px; right:20px;
  background:transparent; border:none; color:var(--offwhite);
  font-family:sans-serif; font-size:40px; line-height:1; cursor:pointer;
}

@media (max-width:992px){
  .header-sticky,
  .header-sticky.collapsed{
    height:var(--header-h);
    flex-direction:row; justify-content:space-between; align-items:center;
    padding:10px 20px;
  }
  .header-main{ justify-content:space-between; }
  .logo,
  .header-sticky.collapsed .logo{ width:180px; height:72px; background-position:left center; }
  .desktop-nav{ display:none; }
  .mobile-nav-toggle{ display:flex; }
}

/* ==================== Hero (same on every page) ==================== */
.hero{
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:70vh;                            /* older browsers */
  min-height:clamp(420px, 70svh, 760px);      /* grows to fit, never a giant empty block */
  padding:calc(var(--header-h) + var(--hero-gap)) 1rem var(--hero-gap);
  background:#3A3A3A url('/images/webp/hero-bg-2400.webp') center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(2,0,0,.55);
}
.hero-overlay{
  width:min(100%, 1000px);
  background:rgba(255,255,255,.95);
  border:2px solid var(--black);
  box-shadow:var(--shadow);
  padding:clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 5vw, 3.75rem);
}
.hero-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.75rem, 1rem + 3.8vw, 4rem);
  line-height:1.05; letter-spacing:.04em; text-transform:uppercase;
  color:var(--black);
}
.hero-subtitle{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.1rem, .8rem + 1.3vw, 2rem);
  line-height:1.15; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink); margin-top:.6rem;
}
.hero-text{
  font-size:clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height:1.6; max-width:60ch; margin:1rem auto 0;
}
.hero-actions{ margin-top:clamp(1rem, 3vw, 1.5rem); }

/* Desktop: tall enough for the Home hero's longer text, so every page's hero
   is the same height on the same screen. */
@media (min-width:993px){
  .hero{
    min-height:max(70vh, 680px);
    min-height:clamp(680px, 70svh, 760px);
  }
}
@media (max-width:768px){
  .hero{ background-image:url('/images/webp/hero-bg-1200.webp'); }
}

/* ==================== Content boxes and text ==================== */
.container{ width:min(1200px, 90%); margin-inline:auto; }
.vhs-box{
  position:relative;
  background:var(--paper);
  border:2px solid var(--black);
  box-shadow:var(--shadow);
  padding:clamp(20px, 3vw, 30px);
  margin:clamp(30px, 4vw, 40px) 0;
}
.vhs-box::before{
  content:"▶ PLAY";
  position:absolute; top:-15px; left:20px;
  background:var(--black); color:var(--offwhite);
  padding:5px 15px; font-size:12px; font-weight:700; line-height:1.7;
}
.vhs-box h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height:1.1; letter-spacing:.05em; text-transform:uppercase; text-align:center;
  color:var(--black); margin-bottom:clamp(18px, 2vw, 25px);
}
.body-text{ font-size:1rem; color:var(--ink); margin-bottom:20px; }
.body-text:last-child{ margin-bottom:0; }

.arrow-heading{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem, 1.1rem + .9vw, 1.8rem);
  line-height:1.2; letter-spacing:.02em; text-transform:uppercase;
  color:var(--black); margin:clamp(20px, 3vw, 35px) 0 clamp(10px, 1.2vw, 15px);
}
.vhs-box h2 + .arrow-heading{ margin-top:clamp(15px, 2vw, 25px); }
.arrow-heading::before{ content:"▶"; margin-right:.6em; }

.sub-heading{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  line-height:1.2; letter-spacing:.05em; text-transform:uppercase; text-align:center;
  color:var(--black); margin:12px 0;
}

.arrow-list{ list-style:none; margin:20px 0 30px; text-align:left; }
.arrow-list li{ position:relative; padding-left:24px; margin-bottom:12px; }
.arrow-list li::before{ content:"▶"; position:absolute; left:0; color:var(--black); }

@media (max-width:768px){
  .vhs-box::before{ font-size:10px; padding:3px 10px; }
}

/* ==================== Buttons (one style everywhere) ==================== */
.cta-btn,
.contact-form button[type="submit"]{
  display:inline-block;
  background:transparent; color:var(--black);
  border:2px solid var(--black);
  font-family:var(--font-body); font-weight:700; text-transform:uppercase; text-decoration:none;
  font-size:clamp(.85rem, .8rem + .2vw, .95rem); line-height:1.4;
  padding:clamp(8px, 1vw, 12px) clamp(20px, 3vw, 40px);
  cursor:pointer; transition:.2s;
}
.cta-btn:hover,
.contact-form button[type="submit"]:hover{
  background:var(--black); color:var(--offwhite);
  transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(0,0,0,.15);
}
.cta-btn--large{
  font-size:clamp(1.05rem, .85rem + .9vw, 1.4rem);
  padding:clamp(12px, 1.5vw, 15px) clamp(18px, 3vw, 40px);
  white-space:nowrap;
}
.section-cta{ text-align:center; margin-top:30px; }

/* ==================== Showreel video ==================== */
.featured-video{ margin-bottom:24px; }
.featured-video.hide{ display:none; }
.video-frame{ position:relative; aspect-ratio:16 / 9; background:#000; overflow:hidden; }
.video-frame iframe,
.video-facade{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-facade{ display:block; padding:0; background:#000; cursor:pointer; }
.video-facade img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--black); color:var(--offwhite);
  border:2px solid var(--offwhite);
  font-family:var(--font-body); font-weight:700; letter-spacing:.08em;
  font-size:clamp(.85rem, .75rem + .6vw, 1.2rem);
  padding:.8em 1.6em; white-space:nowrap;
  transition:background .2s, color .2s;
}
.video-facade:hover .video-play,
.video-facade:focus-visible .video-play{ background:var(--offwhite); color:var(--black); border-color:var(--black); }

/* ==================== Home: portfolio highlights ==================== */
.portfolio-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:20px; }
.portfolio-item{
  position:relative; overflow:hidden;
  border:2px solid var(--black); background:var(--paper);
  transition:transform .2s, box-shadow .2s;
}
.portfolio-item img{ display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#DDD; }
.portfolio-caption{
  position:absolute; inset:auto 0 0 0;
  background:rgba(10,10,10,.9); color:var(--offwhite);
  text-align:center; padding:clamp(8px, 1vw, 10px);
  font-family:var(--font-display); font-weight:400; letter-spacing:.05em;
  font-size:clamp(1rem, .95rem + .2vw, 1.15rem); line-height:1.4;
}
.portfolio-item:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow); }
@media (max-width:600px){
  .portfolio-grid{ grid-template-columns:1fr; }
}

/* ==================== Home: about ==================== */
.about-wrapper{ display:flex; flex-wrap:wrap; gap:clamp(20px, 3vw, 40px); align-items:center; }
.about-text{ flex:1 1 350px; }
.about-img{ flex:0 1 45%; min-width:min(300px, 100%); }
.about-img img{ display:block; width:100%; height:auto; background:#DDD; }
@media (max-width:768px){
  .about-img{ flex:1 1 100%; }
}

/* ==================== Home: services ==================== */
.services-grid-new{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap:25px; margin-top:30px;
}
.service-card-new{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:2px solid var(--black);
  transition:transform .2s, box-shadow .2s;
}
.service-card-new:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow); }
.service-image-new{ height:200px; overflow:hidden; border-bottom:2px solid var(--black); }
.service-image-new img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.service-card-new:hover .service-image-new img{ transform:scale(1.04); }
.service-content-new{ flex-grow:1; padding:clamp(20px, 2.5vw, 25px); }
.service-content-new h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem, 1.3rem + .6vw, 1.8rem);
  line-height:1.15; letter-spacing:.05em; text-transform:uppercase;
  color:var(--black); margin-bottom:12px;
}
.service-content-new p{ line-height:1.6; }

/* ==================== Home: FAQ ==================== */
.faq-list{ margin-top:25px; }
.faq-item{ border-bottom:1.5px solid var(--black); margin-bottom:10px; }
.faq-question{
  position:relative; width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height:1.25;
  color:var(--black); padding:18px 36px 18px 0;
  transition:color .2s;
}
.faq-question::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:2rem; line-height:1;
}
.faq-item.active .faq-question::after{ content:"−"; }
.faq-question:hover{ color:var(--muted); }
/* Height is set from the answer's real height in site.js, so long answers
   are never cut off. */
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.52,.16,.52,.84); }
.faq-answer .body-text{ margin:0; padding-bottom:20px; }

/* ==================== Contact section and form (Home + Contact) ==================== */
.contact-form-section .vhs-box{ text-align:center; }
.contact-call{ text-align:center; margin:25px 0; }
.contact-call .body-text{ margin-top:15px; font-weight:700; }
.form-heading{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing:.03em; text-align:center;
}

.contact-form{
  max-width:500px; margin:0 auto;
  display:flex; flex-direction:column; gap:15px;
  border:2px double var(--black); padding:20px; text-align:left;
}
.form-field{ display:flex; flex-direction:column; gap:4px; }
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:10px 15px;
  border:2px solid var(--ink); border-radius:6px;
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;                 /* 16px+ stops iPhones zooming in on tap */
}
.contact-form [aria-invalid="true"]{ border-color:var(--error); background:#FFF7F7; }
.field-error{ color:var(--error); font-size:.9rem; font-weight:700; line-height:1.4; }
.contact-form button[type="submit"]{ align-self:center; }
.contact-form button[type="submit"][disabled]{ opacity:.6; cursor:wait; transform:none; box-shadow:none; }
.form-status{
  border:2px solid var(--error); background:#FFF7F7; color:var(--error);
  padding:12px 16px; font-weight:700; line-height:1.5; text-align:center;
}
.form-status[hidden]{ display:none; }
.contact-form-asterisk{ font-size:1.1em; font-weight:700; text-align:center; margin-top:5px; }

/* Honeypot field — hidden from real users, visible to dumb bots.
   Do NOT use display:none or type=hidden — sophisticated bots skip those.
   Position off-screen so the field still exists in the DOM. */
.hp-field{
  position:absolute !important; left:-10000px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
  opacity:0 !important; pointer-events:none !important;
}

.success-message{
  max-width:500px; margin:20px auto; padding:20px;
  border:2px solid var(--black); background:var(--offwhite); color:var(--ink);
  font-size:18px; font-weight:700; text-align:center; box-shadow:var(--shadow);
}
.success-message[hidden]{ display:none; }

@media (max-width:768px){
  .contact-form{ gap:12px; padding:16px; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select{ padding:8px 10px; }
}

/* ==================== About: team ==================== */
.team-member{
  display:flex; align-items:stretch; justify-content:space-between;
  gap:2rem; margin-bottom:4rem;
}
.team-member:last-child{ margin-bottom:0; }
.text-container{ flex:1 1 50%; display:flex; flex-direction:column; justify-content:center; }
.photo-container{
  flex:1 1 50%; max-width:50%;
  border:2px solid var(--black); box-shadow:var(--shadow); background:var(--paper);
  overflow:hidden; min-height:350px; max-height:440px;
}
.photo-container img{
  display:block; width:100%; height:100%; min-height:350px; max-height:440px;
  object-fit:cover; object-position:top;
}
.role{
  font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em;
  color:var(--muted); margin-bottom:.4rem;
}
.name{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 1.6rem + 1vw, 2.4rem); line-height:1.1; letter-spacing:.02em;
  color:var(--black); margin-bottom:.3rem;
}
.position{ font-style:italic; color:var(--muted); margin-bottom:1rem; }
.bio{ line-height:1.7; }
@media (max-width:768px){
  .team-member{ flex-direction:column; gap:30px; }
  .photo-container{ max-width:100%; flex:1 1 100%; min-height:220px; max-height:360px; }
  .photo-container img{ min-height:220px; max-height:360px; }
}

/* ==================== Portfolio page ==================== */
.portfolio-intro{ text-align:center; max-width:75ch; margin:0 auto; }
.filters-bar{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:24px clamp(0px, 3vw, 32px) 18px;
  border-bottom:2px solid var(--line);
  margin:24px 0 0; text-align:center;
}
.filters-description{ font-size:1.05rem; font-weight:700; }
.filters-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; }
.filters-tab{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(.95rem, .9rem + .2vw, 1.1rem); letter-spacing:.05em; text-transform:uppercase;
  color:var(--black); background:var(--paper);
  border:2px solid var(--black); border-radius:5px;
  padding:clamp(6px, .8vw, 8px) clamp(12px, 1.4vw, 15px);
  white-space:nowrap; cursor:pointer;
  box-shadow:2px 2px 0 rgba(0,0,0,.1); transition:all .2s;
}
.filters-tab.active,
.filters-tab:hover{
  background:var(--black); color:var(--offwhite);
  transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(0,0,0,.15);
}
.filters-tab:active{ transform:translate(0,0); box-shadow:1px 1px 0 rgba(0,0,0,.05); }
.filters-search{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; }
.filters-search input{
  flex:1 1 180px; max-width:300px;
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--offwhite); border:2px solid var(--black); border-radius:5px;
  padding:8px 10px;
  -webkit-appearance:none; appearance:none;
}
.filters-search button{
  font-family:var(--font-body); font-size:1rem; font-weight:700;
  color:var(--offwhite); background:var(--black);
  border:2px solid var(--black); border-radius:5px;
  padding:8px 15px; cursor:pointer; transition:all .2s;
}
.filters-search button:hover{ background:var(--charcoal); border-color:var(--charcoal); }

.portfolio-mosaic{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap:24px; padding-top:24px;
}
.portfolio-empty{
  grid-column:1 / -1; text-align:center; padding:50px 0;
  font-family:var(--font-display); font-size:2rem; letter-spacing:.05em; color:var(--muted);
}
.project-box{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:260px; overflow:hidden;
  background:var(--offwhite); color:inherit; text-decoration:none;
  border:3px solid var(--black); border-radius:7px;
  box-shadow:4px 8px 0 var(--line);
  cursor:pointer; transition:transform .15s;
}
.project-box:hover{ transform:translate(-4px,-7px) scale(1.025); box-shadow:7px 11px 0 rgba(0,0,0,.15); }
.project-img{ display:block; width:100%; aspect-ratio:2 / 1; object-fit:cover; }
.project-title{
  position:absolute; bottom:32px; left:30px; right:20px; pointer-events:none;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.4rem, 1rem + 1.6vw, 2.2rem); line-height:1; letter-spacing:.01em; text-transform:uppercase;
  color:#fff; text-shadow:2px 2px 0 #1C334A, 0 0 20px #2229;
}
.hide-title-explainer .project-title{ display:none !important; }
.project-category-label{
  position:absolute; top:18px; left:24px; pointer-events:none;
  background:#fff9; color:var(--black);
  border:2px solid var(--black); border-radius:10px;
  font-weight:700; font-size:clamp(.85rem, .8rem + .2vw, 1rem); text-transform:uppercase;
  padding:6px 17px;
}

/* ==================== Footer ==================== */
footer{
  background:var(--black); color:var(--offwhite);
  padding:clamp(30px, 4vw, 40px) 20px 24px; text-align:center;
}
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:center;
  max-width:1200px; margin:0 auto;
}
.footer-column-1{ display:flex; justify-content:center; }
.footer-logo{ display:block; width:150px; height:auto; }
.footer-column-2 p{ font-size:14px; margin:10px 0 5px; }
.footer-column-2 hr{ border:0; border-top:1px solid var(--muted-2); margin:10px 0; }
.footer-column-2 a{ color:var(--offwhite); text-decoration:none; }
.footer-column-2 a:hover{ text-decoration:underline; }
.social-links{ display:flex; justify-content:center; gap:15px; }
.social-links img{ display:block; width:30px; height:30px; transition:transform .2s; }
.social-links a:hover img{ transform:scale(1.1); }
.footer-bottom{
  max-width:1200px; margin:28px auto 0; padding-top:16px;
  border-top:1px solid #2A2A2A; font-size:13px; color:var(--muted-2);
}
@media (max-width:992px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-logo{ margin-bottom:10px; }
  .social-links{ margin-top:10px; }
}