/* ============================================================
   ARTISAN ARENA — static site styles
   Plain CSS port of the original Tailwind utility usage.
   Breakpoints match Tailwind defaults: md = 768px, lg = 1024px.
   ============================================================ */

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

img { display: block; max-width: 100%; height: auto; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  line-height: 1.5;
}

body {
  background: #ffffff;
  color: #111827;
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: always fill the viewport, even on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Typography helpers ---------- */
.text-sm   { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg   { font-size: 18px; }
.text-xl   { font-size: 20px; }
.text-2xl  { font-size: 24px; }
.text-3xl  { font-size: 30px; }
.text-4xl  { font-size: 36px; }
.text-15px { font-size: 15px; }
.text-17px { font-size: 17px; }

.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }

.italic { font-style: italic; }

.tracking-wide   { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }

.leading-relaxed { line-height: 1.625; }

/* Page headings: match live site's 40px line-height (36px font) */
.page-hero h1,
.about-title,
.services-intro h1,
.projects-page h1,
.project-description h1 { line-height: 40px; }

.hidden { display: none; }

/* Responsive visibility helpers (Tailwind hidden md:block / md:hidden) */
.desktop-only { display: none; }
.mobile-only  { display: block; }

@media (min-width: 768px) {
  .desktop-only { display: block; }
  .mobile-only  { display: none; }
}

/* Anchor scroll offset to clear the fixed header */
.scroll-mt { scroll-margin-top: 20px; }
@media (min-width: 768px) { .scroll-mt { scroll-margin-top: 96px; } }

/* ---------- Colors ---------- */
.text-white    { color: #ffffff; }
.text-gray-900 { color: #111827; }
.text-gray-800 { color: #1f2937; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #4b5563; }
.text-gray-200 { color: #e5e7eb; }
.text-stone-100 { color: #f5f5f4; }
.text-stone-200 { color: #e7e5e4; }
.text-stone-400 { color: #a8a29e; }

.bg-white  { background-color: #ffffff; }
.bg-beige  { background-color: #b9aa97; }
.bg-footer { background-color: #272b2e; }

/* ---------- Layout helpers ---------- */
.mx-auto { margin: 0 auto; }

.max-w-3xl { max-width: 768px; margin: 0 auto; }
.max-w-4xl { max-width: 896px; margin: 0 auto; }
.max-w-5xl { max-width: 1024px; margin: 0 auto; }
.max-w-6xl { max-width: 1152px; margin: 0 auto; }
.max-w-7xl { max-width: 1280px; margin: 0 auto; }
.max-w-full { max-width: 100%; }
.max-w-md  { max-width: 448px; margin: 0 auto; }

.px-0  { padding-left: 0;  padding-right: 0; }
.px-4  { padding-left: 16px; padding-right: 16px; }
.px-6  { padding-left: 24px; padding-right: 24px; }
.px-12 { padding-left: 48px; padding-right: 48px; }
.pt-8  { padding-top: 32px; }
.pt-16 { padding-top: 64px; }
.pt-24 { padding-top: 96px; }
.pb-4  { padding-bottom: 16px; }
.pb-6  { padding-bottom: 24px; }
.pb-8  { padding-bottom: 32px; }
.pb-16 { padding-bottom: 64px; }
.pb-24 { padding-bottom: 96px; }
.py-8  { padding-top: 32px;  padding-bottom: 32px; }
.py-16 { padding-top: 64px;  padding-bottom: 64px; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }
.my-12 { margin-top: 48px; margin-bottom: 48px; }

/* ---------- Header / navigation ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  transition: background-color 0.3s;
}

.site-header[data-state="solid"] { background-color: #ffffff; }

.nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 14px;
}

/* Desktop */
.nav-desktop { display: none; }

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.333; /* live: 24px at 18px, 32px at 24px */
  }
  .nav-brand {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2; /* live: 24px at 20px, 36px at 30px */
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (min-width: 1024px) {
  .nav-desktop { gap: 32px; font-size: 24px; }
  .nav-brand  { font-size: 30px; padding-left: 128px; padding-right: 128px; }
}

.nav-desktop a { text-decoration: none; }

.site-header[data-state="transparent"] .nav-desktop a { color: #ffffff; }
.site-header[data-state="transparent"] .nav-desktop a:hover { color: #e5e7eb; }

.site-header[data-state="solid"] .nav-desktop a { color: #111827; }
.site-header[data-state="solid"] .nav-desktop a:hover { color: #4b5563; }

/* Mobile */
.nav-mobile { display: none; }

@media (max-width: 767px) {
  .nav-desktop { display: none; }

  .nav-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-mobile .menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #111827;
    outline: none;
  }

  .nav-mobile .nav-brand {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #111827;
  }

  .nav-mobile .nav-spacer { width: 32px; }

  .site-header[data-state="transparent"] .nav-mobile .menu-toggle,
  .site-header[data-state="transparent"] .nav-mobile .nav-brand { color: #ffffff; }
  .site-header[data-state="transparent"] .nav-mobile .menu-toggle:hover { color: #e5e7eb; }
}

/* Mobile fullscreen menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: #b9aa97;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  overflow: hidden;
}

.mobile-menu.open { display: flex; }

/* Solid-header pages keep the 64px bar with the toggle visible */
.site-header[data-state="solid"] .mobile-menu { top: 68px; }

.mobile-menu .menu-links {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none;
  color: #111827;
}

.mobile-menu .menu-links a { padding: 8px 0; color: #111827; text-decoration: none; }
.mobile-menu .menu-links a:hover { color: #1f2937; }

/* ---------- Home hero carousel ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-slide.active { opacity: 1; z-index: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s;
}

.hero-scroll:hover { transform: translateX(-50%) scale(1.1); }

.hero-scroll svg {
  width: 48px;
  height: 48px;
  color: #ffffff;
  transition: transform 0.3s;
}

.hero-scroll:hover svg { transform: scale(1.1); }

/* ---------- Project top photo + SCROLL DOWN overlay ---------- */
.hero-photo {
  position: relative;
  width: 100%;
  height: 100vh;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

@media (min-width: 768px) { .scroll-overlay { bottom: 32px; } }

.scroll-overlay button {
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
}

.scroll-overlay .scroll-label {
  color: #ffffff;
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
}

.scroll-overlay button:hover { opacity: 0.8; }

.scroll-overlay .scroll-arrow { transition: transform 0.3s; }
.scroll-overlay .scroll-arrow:hover { transform: scale(1.1); }

.scroll-overlay svg {
  width: 48px;
  height: 48px;
  color: #ffffff;
}

/* Animated scroll line */
@keyframes scrollLine {
  0%   { height: 0; opacity: 0; }
  50%  { opacity: 1; }
  100% { height: 2rem; opacity: 0; }
}

.scroll-line-track {
  width: 2px;
  height: 32px;
  overflow: hidden;
}

.scroll-line {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  animation: scrollLine 2s ease-in-out infinite;
}

/* ---------- Gallery reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s, transform 1s;
}

.reveal.visible { opacity: 1; transform: none; }

/* ---------- Sections ---------- */
.section-about {
  padding: 96px 24px;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.section-about p {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625;
  font-style: italic;
}

.grid-2 { display: grid; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    column-gap: 96px;
  }
}

.home-grid {
  padding: 0 16px;
  max-width: 1280px;
  margin: 0 auto;
}

.home-grid .grid-2 {
  column-gap: 32px;
  row-gap: 15px;
}

@media (min-width: 768px) {
  .home-grid .grid-2 { row-gap: 15px; column-gap: 96px; }
}

.home-grid.first { padding-bottom: 24px; }

.home-grid.last { padding-top: 24px; padding-bottom: 96px; }

.home-tile {
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.home-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section-text {
  padding: 64px 24px;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.section-text p {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625;
  font-style: italic;
}

/* Learn more link with animated underline */
.underline-draw { position: relative; display: inline-flex; }

.underline-draw .link-text { position: relative; }

.underline-draw .link-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
}

.underline-draw.animate .link-text::after { animation: underlineDraw 1s ease-out forwards; }

@keyframes underlineDraw {
  0%   { width: 0; }
  100% { width: 100%; }
}

.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  font-style: italic;
  line-height: 28px; /* live */
  margin-top: 24px;
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.3s;
}

.learn-more:hover { color: #4b5563; }

.learn-more svg { width: 20px; height: 20px; }

/* ---------- Standard page hero (title + intro) ---------- */
.page-hero {
  padding: 96px 24px 64px;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

.page-hero h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #111827;
  margin-bottom: 32px;
  text-align: center;
}

.page-hero p {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625;
  font-style: italic;
  text-align: center;
}

.page-hero p + p { margin-top: 24px; }

/* ---------- About page ---------- */
.about-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #111827;
  margin-bottom: 32px;
  text-align: center;
}

.video-section {
  padding: 24px;
  background-color: #b9aa97;
}

.video-section-inner { max-width: 1024px; margin: 0 auto; }

.video-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-top: 48px;
  margin-bottom: 48px;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
}

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
}

.video-play:hover { transform: scale(1.1); }

.video-play svg {
  width: 44px;
  height: 44px;
}

@media (min-width: 768px) { .video-play svg { width: 80px; height: 80px; } }

/* ---------- Contact page ---------- */
/* Mirrors the legacy Next.js contact page: centered hero intro, then the
   form on a beige band (#b9aa97) that flows straight into the dark footer. */
#page-contact .page-hero {
  max-width: 1152px;          /* legacy max-w-6xl */
  padding: 96px 24px 32px;   /* legacy pt-24 pb-8 px-6 */
}

#page-contact .page-hero h1 {
  margin-bottom: 32px;        /* legacy mb-8 */
}

#page-contact .page-hero .contact-intro {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625;
  font-style: italic;
  margin-bottom: 16px;       /* legacy mb-4 */
}

/* ---------- Contact page: form (beige band) ---------- */
.contact-form-section {
  background-color: #b9aa97;
  padding: 16px 24px 24px;   /* legacy pt-4 pb-6 px-6 */
}

.contact-form-wrap {
  max-width: 672px;          /* legacy max-w-2xl */
  margin: 0 auto;
}

.form-status {
  display: none;
  margin-bottom: 24px;       /* legacy mb-6 */
  padding: 16px;             /* legacy p-4 */
  border: 1px solid;
  border-radius: 4px;        /* legacy rounded */
  font-size: 16px;
  line-height: 1.5;
}

.form-status.show { display: block; }

.form-status.success {
  background: #dcfce7;       /* green-100 */
  border-color: #86efac;      /* green-400 */
  color: #15803d;             /* green-700 */
}

.form-status.error {
  background: #fee2e2;       /* red-100 */
  border-color: #fca5a5;      /* red-400 */
  color: #b91c1c;             /* red-700 */
}

.contact-form { width: 100%; }

.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.field {
  display: block;
  margin-bottom: 24px;       /* legacy space-y-6 */
}

.field-label {
  display: block;
  font-size: 14px;           /* legacy text-sm */
  font-weight: 600;
  color: #111827;             /* text-gray-900 */
  margin-bottom: 8px;        /* legacy mb-2 */
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;        /* legacy px-4 py-3 */
  font-family: inherit;
  font-size: 16px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0;          /* rounded-none */
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: transparent; /* focus:border-transparent */
  box-shadow: 0 0 0 2px #6b7280; /* focus:ring-2 ring-gray-500 */
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #6b7280;
}

.contact-form-button {
  display: block;
  width: 100%;               /* legacy w-full */
  padding: 12px 24px;        /* legacy px-6 py-3 */
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #272b2e;        /* inline style backgroundColor on legacy button */
  border: none;
  border-radius: 0;          /* rounded-none */
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.contact-form-button:hover { background: #3a4044; }
.contact-form-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Services page ---------- */
.services-intro {
  padding: 96px 24px;
  text-align: center;
}

.services-intro h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #111827;
  margin-bottom: 32px;
  text-align: center;
}

.services-intro .jump-links {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625; /* live leading-relaxed */
}

@media (min-width: 768px) {
  #page-services { max-width: 1152px; margin: 0 auto; padding: 0 48px 64px; }
  .services-intro { padding: 96px 0 0; }
  .services-intro .jump-links { font-size: 24px; margin-bottom: 32px; }
}

@media (min-width: 1024px) {
  #page-services { padding-left: 24px; padding-right: 24px; }
}

.jump-links a { color: #111827; text-decoration: none; }
.jump-links a:hover { color: #4b5563; }

.jump-links .break { white-space: nowrap; }

.service-row { margin-top: 8px; }

@media (min-width: 768px) { .service-row { margin-top: 24px; margin-bottom: 0; } }

.service-media {
  margin: 8px 24px;
  position: relative;
  height: 341px;
}

@media (max-width: 767px) {
  .service-media { overflow: hidden; }
}

@media (min-width: 768px) {
  .service-media { margin: 0; height: 384px; }
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.2);
}

.service-text { padding-top: 32px; }
@media (min-width: 768px) { .service-text { padding-top: 40px; } }
@media (min-width: 1024px) { .service-text { padding-top: 16px; } }

.service-text h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  line-height: 32px; /* live */
  margin-bottom: 16px;
}

.service-text p {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625;
  font-style: italic;
}

@media (min-width: 768px) {
  .service-row-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    column-gap: 32px;
    align-items: start;
  }
}

@media (min-width: 768px) and (max-width: 1023px) { .service-row-grid { column-gap: 64px; } }
@media (min-width: 1024px) { .service-row-grid { column-gap: 128px; } }

/* ---------- Projects index page ---------- */
.projects-page { padding: 96px 0 16px; }
@media (min-width: 768px) { .projects-page { max-width: 1280px; margin: 0 auto; padding: 96px 16px 64px; } }

.projects-page h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #111827;
  margin-bottom: 64px;
  text-align: center;
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 50px;
}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 50px;
  }
}

.project-tile { display: block; text-decoration: none; }

.project-media {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  margin-bottom: 12px;
  margin-left: -24px;
  margin-right: -24px;
}

@media (min-width: 768px) {
  .project-media { margin-bottom: 24px; margin-left: 0; margin-right: 0; }
}

.project-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s;
}

.project-media img.alt { opacity: 0; }
.project-media:hover img.alt { opacity: 1; }
.project-media:hover img.default { opacity: 0; }

.project-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  line-height: 32px; /* live */
  text-align: left;
  padding-left: 16px;
  transition: color 0.3s;
}

@media (min-width: 768px) { .project-title { padding-left: 60px; } }

.project-tile:hover .project-title { color: #374151; }

/* Last tile keeps bottom spacing on mobile */
.project-tile.last .project-title { margin-bottom: 32px; }
@media (min-width: 768px) { .project-tile.last .project-title { margin-bottom: 0; } }

/* ---------- Project detail pages ---------- */
.project-description {
  padding: 64px 24px;
  max-width: 896px;
  margin: 0 auto;
  text-align: center;
}

.project-description h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #111827;
  margin-bottom: 32px;
}

.project-description p {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  line-height: 1.625;
  font-style: italic;
  margin-bottom: 24px;
}

.project-description p:last-child { margin-bottom: 0; }

.gallery {
  padding: 32px 24px 64px;
  max-width: 1152px;
  margin: 0 auto;
}

.gallery-row { margin-bottom: 64px; }

.gallery-row:last-child { margin-bottom: 0; }

.gallery-wide img { width: 100%; height: auto; object-fit: cover; }
.gallery-wide .img-wrap { overflow: hidden; }

.gallery-pair {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 64px;
  row-gap: 64px;
}

@media (min-width: 768px) { .gallery-pair { grid-template-columns: 1fr 1fr; } }

.gallery-pair .cell img { width: 100%; height: auto; object-fit: cover; }
.gallery-pair .cell .img-wrap { overflow: hidden; }

/* Fade-in only (no vertical shift) for pair cells, so the staggered reveal
   doesn't dynamically change the gap between stacked images on mobile. */
.gallery-pair .cell.reveal { transform: none; }
.gallery-pair .cell.visible { transform: none; }

.gallery-single {
  max-width: 448px;
  margin: 0 auto;
  overflow: hidden;
}

.gallery-single img { width: 100%; height: auto; object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer {
  background-color: #272b2e;
  color: #e7e5e4;
  padding: 32px 24px;
  margin-top: auto;   /* pin to viewport bottom on short pages */
}

@media (min-width: 768px) { .site-footer { padding: 48px 24px; } }

.footer-mobile-logo {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.footer-mobile-logo img { width: 80px; height: 80px; }

.footer-grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
  font-size: 17px;
  font-weight: 500;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 48px;
  }
}

.footer-info { display: none; align-items: flex-start; gap: 46px; }
.footer-info-mobile { display: block; }

@media (min-width: 768px) {
  .footer-mobile-logo { display: none; }
  .footer-info { display: flex; align-items: flex-start; }
  .footer-info-mobile { display: none; }
}

.footer-info .logo { flex-shrink: 0; }
.footer-info .logo img { width: 80px; height: 80px; }

.footer-info h4, .footer-info-mobile h4 {
  font-weight: 600;
  color: #f5f5f4;
  margin-bottom: 16px;
}

.footer-info p, .footer-info-mobile p { margin-bottom: 8px; }

.footer-info p:last-child, .footer-info-mobile p:last-child { margin-bottom: 0; }

.footer-info a, .footer-info-mobile a, .footer-links a, .footer-social a {
  color: #e7e5e4;
  text-decoration: none;
}

.footer-info a:hover, .footer-info-mobile a:hover, .footer-links a:hover, .footer-social a:hover { color: #f5f5f4; }

@media (min-width: 768px) {
  .footer-links { text-align: center; }
  .footer-social { padding-left: 32px; }
}

.footer-links p { margin-bottom: 8px; }
.footer-links p:last-child, .footer-social p:last-child { margin-bottom: 0; }

.footer-bottom {
  max-width: 1152px;
  margin: 32px auto 0;
  padding-top: 32px;
  border-top: 1px solid #57534b;
  text-align: center;
  font-size: 15px;
  font-weight: 500; /* live */
  color: #a8a29e;
}

@media (min-width: 768px) { .footer-bottom { font-size: 17px; } }

.footer-bottom p { margin: 0; }