/* =====================================================================
   PRANKL MASCHINENBAU — Hauptstylesheet
   Ästhetik: viel Weißraum, dünne Grotesk, Beton-Grautöne, Index-Nummern
   Schrift: Archivo (lokal, siehe /fonts)
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;            /* Variable Font – deckt 300–600 ab */
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --paper:#f4f3f1;
  --concrete:#d9d7d2;
  --ink:#1a1a18;
  --mute:#7a786f;
  --line:#cfcdc7;
  --wrap:1320px;
  --pad:40px;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--mute)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   Navigation
   ===================================================================== */
header{position:fixed;top:0;left:0;right:0;z-index:50}
/* Transparenter Hero-Header: dezenter Scrim, damit die helle Navi lesbar bleibt */
header:not(.solid):not(.scrolled)::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));pointer-events:none}
.nav{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;height:88px;color:#fff}
.brand{font-size:1.05rem;letter-spacing:.34em;font-weight:500;text-transform:uppercase}

/* Logo im Hauptmenü: Inline-SVG mit fill:currentColor, erbt die Navigationsfarbe
   (hell über Hero, dunkel auf soliden/gescrollten Headern). Nur in der Nav. */
.nav .brand{display:flex;align-items:center}
.brand-logo{height:40px;width:auto;display:block}
/* Startseite: Metall-Verlauf über dem Hero, beim Scrollen zurück auf die
   farbadaptive Variante (lesbar auf hellem Header) */
.brand-plain{display:none}
header.scrolled .brand-metal{display:none}
header.scrolled .brand-plain{display:block}
.nav-menu{display:flex;gap:46px;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.nav-menu a{opacity:.85;transition:opacity .25s}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{opacity:1}
.nav-menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}

/* Solide Variante für Unterseiten ohne Hero (heller Header auf hellem Grund) */
header.solid{background:var(--paper);border-bottom:1px solid var(--line)}
header.solid .nav{color:var(--ink)}

/* Transparenter Hero-Header (Startseite): nach dem Scrollen weiß hinterlegen */
header,header .nav{transition:background .3s ease,color .3s ease}
header.scrolled{background:var(--paper);border-bottom:1px solid var(--line)}
header.scrolled .nav{color:var(--ink)}

/* Kompetenzen-Dropdown */
.has-dropdown{position:relative;display:flex;align-items:center;height:100%}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:230px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 22px 44px rgba(0,0,0,.12);padding:10px 0;margin:0;
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:60}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown li{display:block}
.dropdown a{display:block;padding:9px 24px;color:var(--ink);opacity:1;letter-spacing:.14em;white-space:nowrap}
.dropdown a:hover,.dropdown a[aria-current="page"]{background:rgba(0,0,0,.05);text-decoration:none}
.has-dropdown>a[class="active"],.has-dropdown>a.active{opacity:1;text-decoration:underline;text-underline-offset:6px}

/* Mobile Toggle */
.nav-toggle{display:none;background:none;border:0;color:inherit;cursor:pointer;width:32px;height:32px;position:relative}
.nav-close{display:none}
.nav-toggle span,.nav-toggle span:before,.nav-toggle span:after{
  content:'';position:absolute;left:4px;right:4px;height:1.5px;background:currentColor;transition:.3s}
.nav-toggle span{top:50%}
.nav-toggle span:before{top:-7px}
.nav-toggle span:after{top:7px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span:before{top:0;transform:rotate(45deg)}
body.nav-open .nav-toggle span:after{top:0;transform:rotate(-45deg)}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{height:100vh;min-height:680px;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:#3a3a36 center/cover;filter:grayscale(.4) contrast(1.05)}
.hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,18,.45) 0%,rgba(20,20,18,.15) 40%,rgba(20,20,18,.65) 100%)}
.hero-inner{position:relative;z-index:2;color:#fff;padding-bottom:64px;width:100%}
.hero h1{font-size:clamp(2.8rem,7.5vw,7rem);font-weight:300;line-height:.96;letter-spacing:-.03em;max-width:14ch;margin-top:24px}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:48px;flex-wrap:wrap;gap:24px;border-top:1px solid rgba(255,255,255,.25);padding-top:24px}
.hero-foot p{max-width:38ch;font-size:1.02rem;font-weight:300;opacity:.92}
.hero-foot .label{color:rgba(255,255,255,.7)}

/* =====================================================================
   Seitenkopf (Unterseiten)
   ===================================================================== */
.page-head{padding:180px 0 80px;border-bottom:1px solid var(--line)}
.page-head .label{display:block;margin-bottom:24px}
.page-head h1{font-size:clamp(2.4rem,6vw,5rem);font-weight:300;line-height:1;letter-spacing:-.03em;max-width:18ch}
.page-head .lead{margin-top:32px;max-width:54ch;font-size:1.1rem;color:var(--mute)}
.breadcrumb{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:28px}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{margin:0 10px;opacity:.6}

/* =====================================================================
   Intro-Statement
   ===================================================================== */
.intro{padding:160px 0 120px}
.intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.intro h2{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:300;line-height:1.18;letter-spacing:-.02em;max-width:22ch}
.intro h2 em{font-style:normal;color:var(--mute)}

/* =====================================================================
   Index-Liste (Leistungen)
   ===================================================================== */
.leistungen{padding:0 0 140px}
.idx{border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:90px 1fr 1.4fr 120px;gap:32px;padding:38px 0;border-bottom:1px solid var(--line);align-items:center;transition:padding .3s,background .3s}
.idx-row:hover{padding-left:18px;background:rgba(0,0,0,.02)}
.idx-num{font-size:.78rem;letter-spacing:.2em;color:var(--mute);font-weight:500}
.idx-row h3{font-size:clamp(1.4rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.01em}
.idx-row p{color:var(--mute);font-size:.98rem;font-weight:300}
.idx-arrow{justify-self:end;font-size:1.4rem;opacity:0;transform:translateX(-10px);transition:.3s}
.idx-row:hover .idx-arrow{opacity:1;transform:translateX(0)}

/* =====================================================================
   Projekte / Referenzen
   ===================================================================== */
.work{padding:120px 0 140px}
.work-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px;flex-wrap:wrap;gap:16px}
.work-head h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:300;letter-spacing:-.02em}
.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:36px}
.proj{overflow:hidden;display:block}
.proj .ph{overflow:hidden;background:var(--concrete);aspect-ratio:4/5;background-size:cover;background-position:center;filter:grayscale(.25);transition:transform .8s ease,filter .6s}
.proj:hover .ph{transform:scale(1.04);filter:grayscale(0)}
.proj .meta{display:flex;justify-content:space-between;margin-top:16px;align-items:baseline}
.proj .meta h4{font-size:1.15rem;font-weight:400}
.proj .meta span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.p1{grid-column:1/7}
.p2{grid-column:7/13;margin-top:80px}
.p3{grid-column:3/10;margin-top:40px}

/* Gleichmäßiges Raster (Referenzen-Übersicht) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}

/* =====================================================================
   Studio-Band
   ===================================================================== */
.studio{padding:120px 0;background:var(--ink);color:var(--paper)}
.studio-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.studio .ph{aspect-ratio:1/1;background:#2a2a27 center/cover;filter:grayscale(.3)}
.studio h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:300;line-height:1.18;letter-spacing:-.02em;margin-bottom:28px}
.studio p{color:#b5b3ab;font-size:1.05rem;font-weight:300;max-width:42ch}
.studio .label{color:#88867d;margin-bottom:24px;display:block}
.stat-line{display:flex;gap:56px;margin-top:48px;flex-wrap:wrap}
.stat-line b{display:block;font-size:2.6rem;font-weight:300}
.stat-line span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#88867d}

/* =====================================================================
   Fließtext-Bereiche (Detail-/Rechtsseiten)
   ===================================================================== */
.prose{padding:90px 0 120px}
.prose-grid{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.prose-grid.single{grid-template-columns:minmax(0,72ch);justify-content:start}
.prose h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:300;letter-spacing:-.02em;margin:48px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;font-weight:500;margin:32px 0 12px}
.prose p{margin-bottom:18px;max-width:68ch;font-size:1.05rem}
.prose p,.prose li{color:var(--ink)}
.prose ul.bullets{margin:0 0 24px;padding:0}
.prose ul.bullets li{position:relative;padding-left:28px;margin-bottom:12px;max-width:64ch}
.prose ul.bullets li:before{content:'—';position:absolute;left:0;color:var(--mute)}
.prose a.inline{border-bottom:1px solid var(--line)}
.prose a.inline:hover{border-color:var(--ink)}
.aside .label{display:block;margin-bottom:14px}
.aside .sticky{position:sticky;top:120px}

/* Zertifikats-Logo (z. B. ISO 9001) */
.cert-logo{width:220px;height:auto;margin-top:8px}

/* Faktentabelle */
.facts{border-top:1px solid var(--line);margin-top:8px}
.facts div{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts dt{color:var(--mute)}
.facts dd{text-align:right}

/* =====================================================================
   Karriere / Stellen
   ===================================================================== */
.jobs{border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:1fr auto 120px;gap:24px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.job:hover{padding-left:18px;background:rgba(0,0,0,.02)}
.job h3{font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:300}
.job .tag{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.job .arrow{justify-self:end;font-size:1.3rem;color:var(--mute)}

/* Stellen-Detailblöcke */
.job-detail{border-top:1px solid var(--line);padding:48px 0}
.job-detail:last-of-type{border-bottom:1px solid var(--line)}
.job-detail-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.job-detail-head h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;letter-spacing:-.01em;margin:0}
.job-detail-head .tag{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.job-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px}
.job-cols h3{font-size:1rem;font-weight:500;margin-bottom:14px}
.job-cols .bullets li{max-width:none}
.job-note{color:var(--mute);margin-top:24px;max-width:70ch}

/* =====================================================================
   Formular (Kontakt)
   ===================================================================== */
.form{display:grid;gap:24px;max-width:640px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-weight:500}
.field input,.field textarea,.field select{
  font:inherit;font-weight:300;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:10px 0;transition:border-color .3s}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--ink)}
.btn{display:inline-block;font:inherit;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);padding:16px 38px;cursor:pointer;
  justify-self:start;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.form-note{font-size:.85rem;color:var(--mute);max-width:54ch}

/* =====================================================================
   Maschinenpark (Kompetenz-Seiten)
   ===================================================================== */
.komp-banner{width:100%;height:clamp(240px,34vw,440px);background-position:center;background-size:cover;filter:grayscale(.25)}

/* Referenzen-Rubrik innerhalb der Kompetenzseiten */
.refs{padding:20px 0 120px}
.refs h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;letter-spacing:-.02em;margin-bottom:12px}
.refs .lead{color:var(--mute);max-width:60ch;margin-bottom:36px}
.ref-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.ref-item{margin:0;overflow:hidden}
.ref-item .ph{aspect-ratio:4/3;background:var(--concrete) center/cover;filter:grayscale(.22);transition:transform .8s ease,filter .6s}
.ref-item:hover .ph{transform:scale(1.04);filter:grayscale(0)}
.ref-item figcaption{margin-top:14px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ref-item .ph{cursor:zoom-in}

/* =====================================================================
   Lightbox (Bild groß anzeigen)
   ===================================================================== */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,20,18,.92);
  display:none;align-items:center;justify-content:center;padding:5vmin}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lightbox-close{position:fixed;top:18px;right:22px;width:46px;height:46px;
  border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.7rem;line-height:1;
  cursor:pointer;transition:background .2s}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.machines{border-top:1px solid var(--line);margin-top:8px}
.machine{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;padding:36px 0;border-bottom:1px solid var(--line)}
.machine h3{font-size:1.15rem;font-weight:500;margin-bottom:8px}
.machine p{font-size:.96rem;line-height:1.7;color:var(--ink);max-width:62ch}
.machine .spec{color:var(--mute);font-size:.82rem;letter-spacing:.04em;margin-top:10px}
.machine-img{aspect-ratio:4/3;background:var(--concrete) center/cover;filter:grayscale(.2);margin-bottom:16px;transition:filter .5s}
.machine-img.zoomable{cursor:zoom-in}
.machine-img.zoomable:hover{filter:grayscale(0)}
.machine-img.is-empty{filter:none}
@media(max-width:760px){.machine{grid-template-columns:1fr;gap:18px}}

/* =====================================================================
   Team / Ansprechpartner
   ===================================================================== */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 56px}
.team .member{border-top:1px solid var(--line);padding-top:20px}
.team .member h3{font-size:1.15rem;font-weight:500;margin-bottom:4px}
.team .member .role{color:var(--mute);font-size:.95rem;margin-bottom:14px}
.team .member p{font-size:.92rem;line-height:1.7;color:var(--ink)}
.team .member a:hover{color:var(--mute)}
@media(max-width:700px){.team{grid-template-columns:1fr}}

/* =====================================================================
   Kontakt-Block (Startseite)
   ===================================================================== */
.contact{padding:160px 0}
.contact .label{display:block;margin-bottom:32px}
.contact a.big{font-size:clamp(2.2rem,6vw,5.2rem);font-weight:300;letter-spacing:-.03em;display:inline-block;border-bottom:1px solid var(--line);padding-bottom:8px;transition:color .3s,border-color .3s}
.contact a.big:hover{color:var(--mute);border-color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:96px;border-top:1px solid var(--line);padding-top:40px}
.contact-grid h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;font-weight:500}
.contact-grid p,.contact-grid a{font-size:.98rem;font-weight:300;line-height:1.7;color:var(--ink)}
.contact-grid a:hover{color:var(--mute)}

/* =====================================================================
   CTA-Band
   ===================================================================== */
.cta{padding:120px 0;border-top:1px solid var(--line)}
.cta-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:300;letter-spacing:-.02em;max-width:18ch}

/* =====================================================================
   Footer
   ===================================================================== */
footer{padding:80px 0 32px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:64px}
.foot-grid .brand{color:var(--ink);margin-bottom:16px;display:inline-block}
.foot-grid .brand-logo{height:34px}
.foot-grid p{font-size:.95rem;color:var(--mute);max-width:34ch}
.foot-grid h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:16px;font-weight:500}
.foot-grid li{margin-bottom:10px}
.foot-grid a{font-size:.95rem}
.foot-grid a:hover{color:var(--mute)}
.fbar{display:flex;justify-content:space-between;font-size:.78rem;letter-spacing:.06em;color:var(--mute);flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:32px}
.fbar a:hover{color:var(--ink)}

/* =====================================================================
   Utilities (ersetzen frühere Inline-Styles)
   ===================================================================== */
.pt-0{padding-top:0}
.pt-40{padding-top:40px}
.section-tight{padding:60px 0 40px}
.mt-sm{margin-top:18px}
.mt-md{margin-top:32px}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.label-block{display:block;margin-bottom:32px}
.text-muted-sm{color:var(--mute);font-size:.95rem}
.h2-narrow{max-width:20ch}
.no-border{border-bottom:0}

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:900px){
  :root{--pad:24px}
  .nav-toggle{display:block}
  .nav-menu{
    position:fixed;inset:0;background:var(--ink);color:#fff;mix-blend-mode:normal;
    flex-direction:column;justify-content:center;align-items:center;gap:32px;
    font-size:1rem;transform:translateY(-100%);transition:transform .4s ease;z-index:40}
  body.nav-open .nav-menu{transform:translateY(0);z-index:60}
  body.nav-open{overflow:hidden}
  /* Schließen-Button (×) oben rechts im offenen Menü */
  .nav-close{display:block;position:fixed;top:14px;right:18px;width:46px;height:46px;
    padding:0;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}

  /* Dropdown im Mobile-Overlay als statische, sichtbare Unterliste */
  .has-dropdown{flex-direction:column;height:auto;gap:16px}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;
    background:transparent;border:0;box-shadow:none;padding:0;min-width:0;text-align:center}
  .dropdown a{color:#fff;opacity:.75;padding:5px 0;font-size:.82rem}
  .dropdown a:hover,.dropdown a[aria-current="page"]{background:transparent;opacity:1}

  .intro-grid,.studio-grid,.prose-grid{grid-template-columns:1fr;gap:40px}
  .prose-grid.single{grid-template-columns:1fr}
  .aside .sticky{position:static}
  .idx-row{grid-template-columns:50px 1fr;gap:14px}
  .idx-row p,.idx-arrow{display:none}
  .p1,.p2,.p3{grid-column:1/13;margin-top:0}
  .grid-3{grid-template-columns:1fr;gap:28px}
  .stat-line{gap:32px}
  .contact-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .job{grid-template-columns:1fr auto;gap:14px}
  .job .arrow{display:none}
  .page-head{padding:140px 0 56px}
}
@media(max-width:560px){
  .contact-grid,.foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important}
}