/* =======================
   Design Tokens
======================= */
:root{
  --clr-text:#646464;
  --clr-green:#7E9583;
  --clr-green-900:#566a5d;
  --clr-bg:#ffffff;

  --radius:12px;
  --radius-frame:7px;

  --container:1200px;
  --cols:12;
  --gutter:24px;

  /* type scale */
  --fs-14:.875rem;
  --fs-16:1rem;
  --fs-20:1.25rem;
  --fs-24:1.5rem;
  --fs-28:1.75rem;
  --fs-32:2rem;
}

/* Motion & base */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
body{
  margin:0;
  font-family:'Khula',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--clr-text);
  line-height:1.6;
  background:var(--clr-bg);
}

.no-scroll {
  overflow: hidden;
}

/* Utilities */
.container{max-width:var(--container);padding-inline:1rem;margin-inline:auto}
section{scroll-margin-top:80px}
a {transition: .3s all ease-in-out}

/* Reusable section head */
.section-head .pretitle{
  color:var(--clr-green);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  font-size:var(--fs-14);margin:0 0 .5rem;
}
.section-head .h2{
  font-weight:400;font-size:40px;line-height:1.2;margin:.25rem 0 .75rem;color:#0b0b0b
}
.section-head .lead{
  font-size:var(--fs-16);color:var(--clr-text);margin:0
}
.section-head--center{text-align:center;max-width:72ch;margin-inline:auto}
.pretitle--light{color:#fff}
.h2--light{color:#fff}

/* =======================
   Header
======================= */
@media (max-width:1024px){
  .logo-img {
    height: 50px;
  }
}

.site-header{
  position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee;
  backdrop-filter:saturate(120%) blur(4px)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:90px}
.main-nav ul,.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap}
.main-nav a{text-decoration:none;color:var(--clr-text);font-weight:600;padding:.75rem .25rem;display:inline-block}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--clr-green);}
.main-nav-burger { display: none;}

.mobile-nav { display: none;}
.main-nav-mob {
  padding: 0 15px;
}
.lang-switch-mob {
  padding-top: 20px;
}

.lang-switch-mob .lang-btn {
  padding: 0;
}

.lang-switch-mob .lang-sep {
  margin: 0 10px;
}

.main-nav-mob ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction: column;
  padding-top: 20px;
}
.main-nav-mob a{
  text-decoration:none;
  color:var(--clr-text);
  font-weight:600;
  padding: 12px 0;
  display:inline-block
}

.main-nav-mob a:hover,.main-nav-mob a:focus-visible{color:var(--clr-green);}

.nav-icons {
  display: none;
}

@media (max-width:1024px) {
  .nav-icons {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    width: 40px;
    height: 40px;
  }
  .header-inner{min-height:60px}
  .main-nav {
    display: none;
  }
  .main-nav-burger { 
    display: flex;
    transform: scale(1);
    transition: .3s transform ease-in-out;
    position: absolute;
  }

  .main-nav-burger-hide {
    transform: scale(0);
    opacity: 0;
    transition: .2s opacity ease-out;
  }

  .main-nav-cross {
    transform: scale(0);
    visibility: hidden;
    opacity: 0;
    position: absolute;
  }

  .main-nav-cross-show {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
    transition: .2s transform ease-in-out;
  }

  .mobile-nav {
    --menu-padding: 20px;
    --settings-extended-height: 150px;
    --settings-normal-height: 96px;
    display: flex;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 10;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    padding: 60px 0 30px 0;
    background-color: #fff;
    transition: .2s left ease-out;
  }
  .mobile-nav-open {
    left: 0;
    transition: .2s left ease-in;
  }
}

/* language switcher */
.lang-switch{
  display:flex; align-items:center; gap:.25rem; margin-left:1rem;
}
.lang-btn{
  appearance:none; background:none; border:0; padding:.25rem .35rem;
  font:600 14px/1.2 'Khula',system-ui,sans-serif; color:var(--clr-text); cursor:pointer;
  transition: .3s all ease-in-out
}
.lang-btn.is-active{ font-weight:800; }
.lang-btn:hover{ color:var(--clr-green); }
.lang-sep{ opacity:.6; }

@media (max-width:1024px){
  .lang-switch{ margin-left:.5rem; }
}

/* =======================
   Hero
======================= */
.hero{
  position:relative;min-height:700px;color:#fff;width:100%;
  clip-path:polygon(0 0,100% 0,100% 88%,0 98%)
}
@media (max-width:640px){.hero{clip-path:polygon(0 0,100% 0,100% 94%,0 100%);min-height:520px}}

.hero__media{position:absolute;inset:0}
.hero__media picture,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,.45) 45%,rgba(0,0,0,.45))}

.hero__grid{
  position:relative;z-index:1;height:100%;display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gutter);
  align-content:center;max-width:var(--container);margin-inline:auto;padding-block:clamp(8rem,8vh,6rem)
}
.hero__content{grid-column:2 / span 7}
.hero__title{font:700 64px/1.1 'Khula',system-ui,sans-serif;margin:0 0 1rem}
.hero__sub{font-size:20px;margin:0 0 1.25rem;max-width:70ch}

@media (max-width:1024px){
  .hero__content{grid-column:2 / span 9}
  .hero__title{font-size:48px}
  .lang-switch {
    display: none;
  }
}
@media (max-width:640px){
  .hero__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero__content{grid-column:1 / -1}
  .hero__title{font-size:36px}
  .hero__sub{font-size:18px}
}

/* =======================
   About
======================= */
.section{padding:75px 0}
.about__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.about__text{grid-column:1 / span 6}
.about__cards{grid-column:7 / span 6;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-content:start}
.about__text p{margin:0 0 1rem}
.about-note{
  color:var(--clr-green);
  font-size:16px;
  margin-top:1rem;
  font-weight: 400;
}

.about-note a {
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

/* About cards — improved */
.about__cards{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-content:start;
}

.about-card{
  --card-plain:#FBFFFF;                  /* very light, close to white */
  --card-tint:rgba(126,149,131,.10);     /* soft green tint */
  color:var(--clr-green);
  text-align:center;
  padding:26px 22px;
  border-radius:14px;
  border:1px solid rgba(126,149,131,.08);
  font-size:clamp(18px,1.9vw,22px);
  line-height:1.35;
  background:var(--card-plain);
  box-shadow:0 4px 50px rgba(0,0,0,.15);
  transition:.3s all ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* correct visual order: 1 & 4 light, 2 & 3 tinted */
.about-card:nth-child(2),
.about-card:nth-child(3){ background:rgb(1 75 17 / 30%); color: white; }
.about-card:nth-child(1),
.about-card:nth-child(4){ background: white; color: #646464; }

.about-card:hover,
.about-card:focus-within{
  transform:scale(1.01);
  box-shadow:0 8px 60px rgba(0,0,0,.25);
  scale: 1.05;
}

@media (prefers-reduced-motion:reduce){
  .about-card{ transition:none; }
}

@media (max-width:1024px){
  .about__text,.about__cards{grid-column:1 / -1}
  .section-head .h2{font-size:32px}
  .section{padding:55px 0}
}

@media (max-width:640px){
  .section-head .h2{font-size:28px}
  .section{padding:45px 0}
  .about__cards{ grid-template-columns:1fr; gap:16px; }
  .about-card:nth-child(1),
  .about-card:nth-child(3){  background: white; color: #646464; }
  .about-card:nth-child(2),
  .about-card:nth-child(4){ background:rgb(1 75 17 / 30%); color: white; }

}



/* =======================
   Nachhaltigkeit
======================= */
.sus-frame{
  border-radius:7px;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top: 28px;
  box-shadow:0 20px 40px rgba(0,0,0,.06)
}
.sus-card{position:relative;min-height:460px;display:flex;flex-direction:column;justify-content:space-between}
.sus-card__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;transition:transform .6s ease}
.sus-card__bg img{width:100%;height:100%;object-fit:cover}
.sus-card__bg::before,.sus-card__bg::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.sus-card__bg::before{top:0;height:48%;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0))}
.sus-card__bg::after{bottom:0;height:38%;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0))}
.sus-card__copy{color:#fff;font-size:16px;line-height:1.4;text-align:center;padding:20px 18px 0}
.sus-card__label{color:#fff;font-weight:400;letter-spacing:.02em;font-size:32px;text-align:center;padding:18px 12px 26px}
.sus-card:hover .sus-card__bg,.sus-card:focus-within .sus-card__bg{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.sus-card__bg{transition:none}}

@media (max-width:1024px){
  .sus-frame{grid-template-columns:repeat(2,1fr)}
  .sus-card{min-height:380px}
}
@media (max-width:640px){
  .sus-frame{grid-template-columns:1fr}
  .sus-card{min-height:320px}
  .sus-card__label{font-size:28px}
  .sus-card__copy{font-size:15px}
  #sustainability .section-head--center {
    text-align: left;
  }
}

/* =======================
   Herstellung
======================= */
.production{background:linear-gradient(180deg,#7E9583 0%,#000 100%)}
.production .pretitle {
  color: white;
}
#prod-title { color: white;}
/* arc size */
:root{ --prod-arc:520px }

.steps{list-style:none;margin:0;padding:0;display:grid;row-gap:45px}
.step{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:45px;position:relative
}
.step-media{
  position:relative;width:460px;max-width:100%;aspect-ratio:460/340;overflow:visible;justify-self:start
}
.step-media::after{
  content:"";position:absolute;width:var(--prod-arc);height:var(--prod-arc);border-radius:50%;
  background:rgba(245,247,255,.10);z-index:0
}
.step-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:16px}
.step-no{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  font:700 90px/1 'Poppins',sans-serif;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.25)
}

/* text in production */
.step-text h3{color:#fff;font-weight:600;font-size:24px;line-height:1.2;margin:0 0 .5rem}
.step-text p{color:#fff;font-size:18px;line-height:1.6;margin:0 0 .75rem}

/* Alternating */
.steps li:nth-child(odd) .step-no{right:-30px; font-size:72px;}
.steps li:nth-child(odd) .step-media::after{right:0;bottom:0;transform:translate(50%,50%)}

.steps li:nth-child(even) .step-media{justify-self:end;order:2}
.steps li:nth-child(even) .step-text{order:1}
.steps li:nth-child(even) .step-no{left:-30px;right:auto; font-size:72px}
.steps li:nth-child(even) .step-media::after{left:0;bottom:0;transform:translate(-50%,50%)}

@media (max-width:1024px){
  :root{--prod-arc:460px}
  .section-head .h2.h2--light{font-size:32px}
  .step{grid-template-columns:1fr;row-gap:18px}
  .steps li .step-media{order:1;justify-self:start}
  .steps li .step-text{order:2}
  .steps li .step-no{right:-18px;left:auto}
  .steps li .step-media::after{right:0;left:auto;transform:translate(50%,50%)}
  .steps li:nth-child(even) .step-media{order:1}
}

@media (max-width:768px){
 :root{--prod-arc:300px}
 .steps li:nth-child(even) .step-media{order:1}
}


@media (max-width:640px){
  :root{--prod-arc:420px}
  .step-media{width:100%}
  .steps li:nth-child(odd) .step-no{right:30px; font-size:36px;}
  .steps li:nth-child(even) .step-no{left:30px; font-size:36px;}
  .step-no{top: unset; bottom: 0;}
  .step-text h3{font-size:22px}
  .step-text p{font-size:16px}
  .steps li:nth-child(odd) .step-media::after{display: none;}
  .steps li:nth-child(even) .step-media{order:1}
}

/* =======================
   Lieferung & Service
======================= */
.service__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.service__intro{grid-column:1 / span 6}
.service-items{grid-column:8 / span 5;list-style:none;margin:0;padding:0}

.service-item{
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:flex-start;color:var(--clr-text);
  padding-bottom:24px;border-bottom:1px solid #D6D6D6;margin-bottom:24px
}
.service-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.service-item__text h3{margin:0 0 .25rem;font-size:24px;font-weight:600;color:var(--clr-green);line-height:1.2}
.service-item__text p{margin:0;font-size:16px;line-height:1.6}

@media (max-width:1024px){
  .service__grid{grid-template-columns:1fr}
  .service__intro,.service-items{grid-column:1 / -1}
}
@media (max-width:640px){
  .section-head .h2{font-size:32px}
  .service-item{grid-template-columns:44px 1fr}
  .service-item__text h3 {
    font-size: 20px;
  }
}
/* ---------- Always-on base motion ---------- */
.service-item{
  position: relative;
  overflow: hidden;
  transition: background .25s ease, box-shadow .25s ease;
  padding-right: 18px;
}

.service-item svg{
  transform-origin: 50% 50%;
  will-change: transform;
  transition: transform .35s ease, filter .35s ease, stroke .25s ease;
  transform: translateY(-2px); /* subtle float baseline */
  filter: drop-shadow(0 2px 8px rgba(126,149,131,.18));
}
.service-item svg path{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: stroke .25s ease;
}

/* ---------- 1) Truck – wheels spin + gentle bob (always) ---------- */
.service-items li:nth-child(1) svg{
  animation: truckBob 1.5s ease-in-out infinite;
}
/* NOTE: assumes your 1st & 2nd paths are the wheels */
.service-items li:nth-child(1) svg path:nth-of-type(1),
.service-items li:nth-child(1) svg path:nth-of-type(2){
  animation: wheelSpin .8s linear infinite;
}

/* ---------- 2) Flexible amounts – corners breathe + stack wiggle (always) ---------- */
/* corners (paths 1–4) */
.service-items li:nth-child(2) svg path:nth-of-type(1),
.service-items li:nth-child(2) svg path:nth-of-type(2),
.service-items li:nth-child(2) svg path:nth-of-type(3),
.service-items li:nth-child(2) svg path:nth-of-type(4){
  animation: cornerPulse 1.2s ease-in-out infinite;
}
/* inner stack (paths 5–7) */
.service-items li:nth-child(2) svg path:nth-of-type(5){ animation: stackShift 1.6s ease-in-out infinite; }
.service-items li:nth-child(2) svg path:nth-of-type(6){ animation: stackShift 1.6s .08s ease-in-out infinite; }
.service-items li:nth-child(2) svg path:nth-of-type(7){ animation: stackShift 1.6s .16s ease-in-out infinite; }

/* ---------- 3) Personal advice – head nod + dot pulse (always) ---------- */
.service-items li:nth-child(3) svg{
  animation: headNod 1.2s ease-in-out infinite;
}
/* first path is the head circle in your SVG */
.service-items li:nth-child(3) svg path:nth-of-type(1){
  animation: nodePulse 1.4s ease-in-out infinite;
}

/* ---------- Hover/focus boost (optional, tasteful) ---------- */

.service-item:hover svg,
.service-item:focus-within svg{
  /* slightly higher float + stronger shadow */
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 16px rgba(126,149,131,.28));
}
.service-item:hover svg path,
.service-item:focus-within svg path{
  stroke: var(--clr-green-900);
}

/* ---------- Keyframes ---------- */
@keyframes wheelSpin{ to{ transform: rotate(360deg); } }

@keyframes truckBob{
  0%{ transform: translateX(-2px); }
  50%{ transform: translateX(-4px); }
  100%{ transform: translateX(-2px); }
}

@keyframes cornerPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}

@keyframes stackShift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(1.5px); }
}

@keyframes headNod{
  0%  { transform: translateY(-2px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-1.2deg); }
  100%{ transform: translateY(-2px) rotate(0deg); }
}

@keyframes nodePulse{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(126,149,131,0)); }
  50%{ transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(126,149,131,.45)); }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .service-item,
  .service-item::after,
  .service-item svg,
  .service-item svg path{
    transition: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}


/* =======================
   Kontakt
======================= */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px}
.card{
  background:#fff;border:1px solid #e6ece7;border-radius:16px;padding:30px;color:#000;display:flex;gap:14px;
  box-shadow:0 4px 50px rgba(0,0,0,.15);transform:translateZ(0);transition:transform .25s ease,box-shadow .25s ease
}
.card:hover{transform:scale(1.01);box-shadow:0 8px 60px rgba(0,0,0,.25)}
.card__body h3{margin:0 0 .35rem;font-size:20px;font-weight:600;color:var(--clr-green);line-height:1.2}
.card__body p{margin:0;font-size:16px;line-height:1.6}
.card__body a{color:var(--clr-text);text-decoration:none}
.card__body a:hover{color:var(--clr-green)}
.header-mob {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
  position: fixed;
  width: 100%;
  z-index: 3;
  display: none;
  transition: max-height .2s ease-out;
  max-height: 240px;
}
#contact {
  padding-bottom: 120px;
}

@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr 1fr}
  .card{padding:18px}
  #contact {
    padding-bottom: 100px;
  }
}
@media (max-width:640px){
  .contact-grid{grid-template-columns:1fr; gap: 15px}
  .card{padding:16px}
  .section-head .h2{font-size:28px}
  #contact .section-head--center {
    text-align: left;
  }
}

/* ===============================
   Kontakt — always-on icon motion
   (works with your current SVGs)
==================================*/

/* Shared baseline */
.contact-grid .card svg{
  transform-origin: 50% 50%;
  will-change: transform, filter, stroke-dashoffset;
  transition: transform .35s ease, filter .35s ease, stroke .25s ease;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 8px rgba(126,149,131,.18));
}
.contact-grid .card svg path{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: stroke .25s ease, opacity .25s ease;
}

/* Hover/focus boost (optional) */
.contact-grid .card:hover,
.contact-grid .card:focus-within{
  box-shadow: 0 10px 34px rgba(0,0,0,.12);
}
.contact-grid .card:hover svg,
.contact-grid .card:focus-within svg{
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 16px rgba(126,149,131,.28));
}
.contact-grid .card:hover svg path,
.contact-grid .card:focus-within svg path{
  stroke: var(--clr-green-900);
}

/* ---------- Card 1: Email ---------- */
/* gentle float */
.contact-grid .card:nth-child(1) svg{
  animation: floatSlow 3.2s ease-in-out infinite;
}
/* flap wiggle (usually the last path, the triangle) */
.contact-grid .card:nth-child(1) svg path:nth-of-type(3){
  animation: flapWiggle 1.6s ease-in-out infinite;
}
/* decorative stamp/wave (first path) ping */
.contact-grid .card:nth-child(1) svg path:nth-of-type(1){
  animation: pingGlow 2.2s ease-in-out infinite;
}

/* ---------- Card 2: Location ---------- */
/* bob + micro rotate for the whole pin */
.contact-grid .card:nth-child(2) svg{
  animation: floatTilt 2.8s ease-in-out infinite;
}
/* inner dot pulse (first path) */
.contact-grid .card:nth-child(2) svg path:nth-of-type(1){
  animation: nodePulse 1.6s ease-in-out infinite;
}

/* ---------- Card 3: Phone/Signal ---------- */
/* handset float */
.contact-grid .card:nth-child(3) svg{
  animation: floatSlow 3s ease-in-out infinite;
}
/* handset wiggle (first path) */
.contact-grid .card:nth-child(3) svg path:nth-of-type(1){
  animation: handsetNod 1.8s ease-in-out infinite;
}


/* ---------- Keyframes ---------- */
@keyframes floatSlow{
  0%,100%{ transform: translateY(-1px); }
  50%{ transform: translateY(-3px); }
}
@keyframes floatTilt{
  0%  { transform: translateY(-1px) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-1deg); }
  100%{ transform: translateY(-1px) rotate(0deg); }
}
@keyframes dashLoop{
  to{ stroke-dashoffset: -400; }
}
@keyframes flapWiggle{
  0%,100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-4deg); }
}
@keyframes nodePulse{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(126,149,131,0)); }
  50%{ transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(126,149,131,.45)); }
}
@keyframes pingGlow{
  0%,100%{ opacity: .95; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}
@keyframes handsetNod{
  0%  { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-1.2deg) translateY(-1px); }
  100%{ transform: rotate(0deg) translateY(0); }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .contact-grid .card,
  .contact-grid .card svg,
  .contact-grid .card svg path{
    transition: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

/* =======================
   Footer
======================= */
.site-footer{
  background:#7E9583;
  color:#fff;
  padding:56px 0 10px 0;               
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* links */
.footer-links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin:0 0 24px;
  padding:0;
}
.footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.footer-links a:hover,
.footer-links a:focus-visible{
  cursor: pointer;
}

/* legal line */
.legal{
  margin:8px 0 0;
  font-size:16px;               
  line-height:1.5;
  opacity:.9;
}

.footer-inner .brand {
  margin-bottom: 60px;
}

/* responsive */
@media (max-width:1024px){
  .site-footer{ padding:48px 0 16px 0; }
  .footer-inner .brand {
    margin-bottom: 48px;
  }
}
@media (max-width:640px){
  .footer-inner{ align-items:left; text-align:left; }
  .footer-links{ justify-content:flex-start; }
  .legal{ margin-top:16px; font-size: 14px; }
  .footer-inner .brand {
    margin-bottom: 30px;
  }
}