/* ══════════════════════════════════════════════════════════════════
   RERAT FORM & CONCEPT
   Art direction per WEBSITE_UI.pdf (Ivan Rérat, 2026)
   ══════════════════════════════════════════════════════════════════ */

/* ─── Typefaces ───────────────────────────────────────────────────
   Univa Nova throughout — masthead, categories, captions, About, the
   project text blocks, clients and footer.

   --font-text was the serif of the reference layouts, set in small caps
   for the project titles and their explanatory text. It now points at
   Univa Nova as well, so the site carries one face. Point it back at
   'Cormorant Garamond' to restore the two-face setting of the PDF.

   Carta Nueva is bundled and wired to --font-script. It is a formal
   roundhand and the supplied trial cut carries 64 glyphs (A-Z a-z 0-9
   and a full stop), so it has no accents, comma, apostrophe or
   ampersand and cannot carry French copy or running text. It is here
   for display accents, where a script is what is wanted.

   Nothing outside this block names a font. To change a face, change a
   variable.
   ───────────────────────────────────────────────────────────────── */
@font-face{font-family:'Carta Nueva Display';src:url('fonts/CartaNueva-Display.woff2') format('woff2'),url('fonts/CartaNueva-Display.otf') format('opentype');font-display:swap}
@font-face{font-family:'Carta Nueva Large';  src:url('fonts/CartaNueva-Large.woff2')   format('woff2'),url('fonts/CartaNueva-Large.otf')   format('opentype');font-display:swap}
@font-face{font-family:'Carta Nueva Deck';   src:url('fonts/CartaNueva-Deck.woff2')    format('woff2'),url('fonts/CartaNueva-Deck.otf')    format('opentype');font-display:swap}
@font-face{font-family:'Carta Nueva Medium'; src:url('fonts/CartaNueva-Medium.woff2')  format('woff2'),url('fonts/CartaNueva-Medium.otf')  format('opentype');font-display:swap}
@font-face{font-family:'Carta Nueva Small';  src:url('fonts/CartaNueva-Small.woff2')   format('woff2'),url('fonts/CartaNueva-Small.otf')   format('opentype');font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --font-ui:'Univa Nova','Futura','Avenir Next',Helvetica,Arial,sans-serif;
  --font-text:var(--font-ui);
  --font-serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --font-script:'Carta Nueva Display','Carta Nueva Large',cursive;

  /* colour — every one of these flips in the dark theme below */
  --paper:#fff;
  --ink:#111;
  --ink-soft:#6b6b6b;
  --ink-faint:#a0a0a0;
  --rule:#e6e6e6;
  --plate:#f4f4f4;
  --clients:#8e8e8e;
  --clients-head:#bdbdbd;
  --essay-body:#3a3a3a;
  --sign:#3d3d3d;
  --lang-rule:#d5d5d5;

  /* metrics — imagery is deliberately wider than the previous site */
  --gutter:8vw;
  --frame:1560px;
  --stack-gap:3px;   /* the hairline between one image and the next */
  --head:82px;   /* the masthead's real height — the bar sticks under it */
  --bar:46px;

  --ease:cubic-bezier(.22,1,.36,1);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

.frame{width:calc(100% - var(--gutter)*2);max-width:var(--frame);margin:0 auto}

/* ══════════════ KEYBOARD ══════════════ */
/* A visible focus ring for anyone navigating without a pointer, and a way
   past the masthead straight into the work. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
.plate:focus-visible{outline-offset:-3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--paper);color:var(--ink);
  padding:12px 18px;border:1px solid var(--ink);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:var(--gutter);top:8px}

/* present to a screen reader and to a crawler, absent to the eye */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ══════════════ MASTHEAD ══════════════ */
.head{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  padding-top:14px;
}
/* Ivan's own site sets the masthead in three lanes, and this follows it:
   the language pair (with the theme switch beside it) alone in the top
   right corner; the wordmark centred with Contact, Clients and About
   right-aligned on the same line; the categories on their own row
   underneath. The three columns are 1fr / auto / 1fr, so the wordmark sits
   on the true centre of the page however long the links get. */
.head-in{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;row-gap:10px;
  padding:2px 0 12px;
}
.head-in .wordmark{grid-column:2;grid-row:2}

.wordmark{
  font-size:22px;font-weight:700;line-height:1;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
  transition:opacity .3s var(--ease);
}
.wordmark:hover{opacity:.5}

.head-top{
  grid-column:3;grid-row:1;justify-self:end;
  display:flex;align-items:center;gap:14px;
}
.lang{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.2em}
.lang button{color:var(--ink-faint);transition:color .25s;line-height:1}
.lang button.on,.lang button:hover{color:var(--ink)}
.lang i{font-style:normal;color:var(--lang-rule)}

.head-nav{
  grid-column:3;grid-row:2;justify-self:end;
  display:flex;gap:26px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;line-height:1;
}
.head-nav a{position:relative;padding-bottom:3px}
.head-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.head-nav a:hover::after,.head-nav a.on::after{transform:scaleX(1);transform-origin:left}

/* the theme switch — a mark, not a label */
.theme{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  color:var(--ink-faint);transition:color .25s,transform .35s var(--ease);
}
.theme:hover{color:var(--ink)}
.theme svg{width:13px;height:13px;display:block}
.theme .moon{display:none}
[data-theme="dark"] .theme .sun{display:none}
[data-theme="dark"] .theme .moon{display:block}

/* ══════════════ CATEGORY BAR ══════════════ */
.bar{
  position:sticky;top:var(--head);z-index:99;
  background:var(--paper);
  height:var(--bar);display:flex;align-items:center;
}
/* Four categories in an evenly spaced row held on the centre — wide gaps,
   but not pushed out to the edges of the frame, which is how they sit on
   Ivan's own site. */
.bar-in{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(38px, 6.5vw, 104px);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  color:var(--ink-soft);
}
.bar-in a{position:relative;padding-bottom:4px;transition:color .25s;white-space:nowrap}
.bar-in a:hover,.bar-in a.on{color:var(--ink)}
.bar-in a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.bar-in a:hover::after,.bar-in a.on::after{transform:scaleX(1);transform-origin:left}

/* ══════════════ PAGE ══════════════ */
main{padding-bottom:96px}
.page{animation:fade .55s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ══════════════ PLATES (wide imagery) ══════════════ */
.stack{display:flex;flex-direction:column;gap:var(--stack-gap);padding-top:0}

.plate{position:relative;display:block;overflow:hidden;background:var(--plate)}
.plate img,.plate video{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
a.plate:hover img,a.plate:hover video{transform:scale(1.018)}

/* hover caption — client / project / discipline, bottom-left */
.cap{
  position:absolute;left:0;bottom:0;
  padding:26px 30px;
  color:#fff;line-height:1.45;
  text-shadow:0 1px 14px rgba(0,0,0,.42);
  opacity:0;transform:translateY(4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none;
}
a.plate:hover .cap,a.plate:focus-visible .cap{opacity:1;transform:none}
.cap b{display:block;font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.cap i{display:block;font-size:13.5px;font-style:italic;font-weight:400;letter-spacing:.04em;margin-top:4px}
.cap s{display:block;font-size:13.5px;font-weight:500;text-decoration:none;letter-spacing:.04em;margin-top:3px}

/* Dark imagery carries white type on its own. Pale imagery (the fan, the
   Floralies cover, the pastry box) needs a scrim or the caption vanishes. */
.plate.light .cap{text-shadow:0 1px 3px rgba(0,0,0,.55),0 1px 20px rgba(0,0,0,.45);z-index:1}
.plate.light::after{
  content:'';position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(to top,rgba(0,0,0,.58) 0%,rgba(0,0,0,.24) 38%,transparent 100%);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
a.plate.light:hover::after,a.plate.light:focus-visible::after{opacity:1}

/* ══════════════ PROJECT TEXT BLOCK ══════════════ */
/* The project text as set out in WEBSTE DESIGN/HOW IT SHOULD BE: the
   client in bold caps, the project in italic beneath it, then the
   discipline — all three centred over a justified column of copy. */
.essay{max-width:620px;margin:78px auto 0;font-family:var(--font-text)}
.essay-head{text-align:center;margin-bottom:34px}
.essay h1{
  font-size:21px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;margin-bottom:12px;
}
.essay p{
  font-size:13.5px;line-height:1.95;letter-spacing:.02em;
  color:var(--essay-body);text-align:justify;
}
.essay-head p{text-align:center;color:var(--ink)}
.essay-head .essay-title{font-style:italic;font-size:17px;letter-spacing:.01em;margin-bottom:10px}
.essay-head .essay-role{font-size:15px;letter-spacing:.01em}
.essay-head .essay-role span{color:var(--ink-faint);margin-left:6px}
.essay p + p{margin-top:15px}
.essay .draft{
  margin-top:22px;font-family:var(--font-ui);font-variant:normal;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}

/* ══════════════ ABOUT ══════════════ */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;padding-top:6px}
.about-portrait{background:var(--plate)}
.about-text{font-size:13px;line-height:1.72;letter-spacing:.012em;text-align:justify;max-width:430px}
.about-text p{margin-bottom:15px}
.about-text p.lead{font-weight:600}
.about-text .sign{font-style:italic;color:var(--sign);margin-top:26px}
.about-text .sign span{display:block}
.about-links{margin-top:26px;display:flex;flex-direction:column;gap:9px}
.about-links a{position:relative;align-self:flex-start;font-size:13px}
.about-links a.strong{font-weight:600}
.about-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.about-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* The homepage foot carries the names alone — the marks are the clients
   page. Same grid, quiet type. */
.clients-names li{
  display:block;text-align:center;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.6;
  color:var(--clients);
}
.clients-names ul{gap:26px 30px}

/* ══════════════ SCRUBBED SEQUENCES ══════════════
   A section taller than the window, with the frames held under the
   masthead while the scroll through that height plays them. Each carries
   its own drawn width (--seq-w) and the room it leaves around itself
   (--seq-pad); --seq-ar is the shape of the frames, set by the player from
   the manifest, and it is what turns the height left in the window into a
   width. The canvas takes the sequence's own ground colour before the
   first frame arrives, so nothing flashes. */
.seq{position:relative;margin-bottom:var(--stack-gap)}
.seq-in{
  position:sticky;top:calc(var(--head) + var(--bar));
  height:calc(100vh - var(--head) - var(--bar));
  display:flex;align-items:center;justify-content:center;
}
.seq-canvas{
  width:min(var(--seq-w, 560px), 100%,
            calc((100vh - var(--head) - var(--bar) - var(--seq-pad, 120px)) * var(--seq-ar, 1)));
  height:auto;display:block;
  background:var(--plate);
}
@supports (height:100svh){
  .seq-in{height:calc(100svh - var(--head) - var(--bar))}
  .seq-canvas{width:min(var(--seq-w, 560px), 100%,
              calc((100svh - var(--head) - var(--bar) - var(--seq-pad, 120px)) * var(--seq-ar, 1)))}
}
/* On a phone the toolbar comes and goes and the category bar is no longer
   sticky, so only the masthead is still overhead. */
@media(max-width:860px){
  /* a square frame in a portrait window leaves a field of white above and
     below it, so the held box is only as tall as the frame needs */
  .seq-in{top:var(--head);
          height:min(calc(100vh - var(--head)), calc(100vw + 44px))}
  .seq-canvas{width:min(var(--seq-w, 420px), 100%,
              calc((100vh - var(--head) - var(--seq-pad, 90px)) * var(--seq-ar, 1)))}
  @supports (height:100svh){
    .seq-in{height:min(calc(100svh - var(--head)), calc(100vw + 44px))}
    .seq-canvas{width:min(var(--seq-w, 420px), 100%,
                calc((100svh - var(--head) - var(--seq-pad, 90px)) * var(--seq-ar, 1)))}
  }
}
/* No scrubbing for anyone who has asked for less movement: the section
   stops being a scroll track and shows the last frame. */
@media(prefers-reduced-motion:reduce){
  .seq{height:auto !important}
  .seq-in{position:static;height:auto;padding:8px 0 0}
}

/* the monogram wants air before the ways to reach him — 3px of section
   margin plus this makes the 84px it had before the sequence became a
   block, so Contact is unchanged to the pixel */
.seq + .contact{padding-top:81px}

/* ══════════════ CONTACT ══════════════ */
/* The monogram is the page's picture, so what is left is one column of
   type, held in the middle beneath it. */
.contact{display:flex;justify-content:center;padding-top:6px}
.contact-card{max-width:430px;font-size:13px;line-height:1.72;letter-spacing:.012em}
.contact-card .eyebrow{
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px;
}
.contact-card h1{
  font-size:23px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.35;margin-bottom:22px;
}
.contact-card p.lead{font-weight:600;margin-bottom:26px;color:var(--ink)}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:baseline}
.contact-list li span{
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-faint);
}
.contact-list li a{position:relative;align-self:flex-start;font-size:13px}
.contact-list li a.strong{font-weight:600}
.contact-list li a.strong::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.contact-list li a.strong:hover::after{transform:scaleX(1);transform-origin:left}

/* ══════════════ SELECTED CLIENTS (deliberately discreet) ══════════════ */
.clients{padding:126px 0 40px;max-width:1240px;margin:0 auto;text-align:center}
.clients h1,.clients h2{
  font-size:9px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--clients-head);margin-bottom:46px;
}
/* Five across, then four — the row as laid out, reading left to right. */
.clients ul{
  list-style:none;
  display:grid;grid-template-columns:repeat(5, minmax(0,1fr));
  gap:44px 30px;align-items:center;justify-items:center;
}
.clients li{width:100%;display:flex;align-items:center;justify-content:center}
/* Each mark carries its own drawn width (--logo-w, set per client in
   site.js) so the row balances by eye rather than by a single height cap;
   --logo-scale takes the whole row down together on narrower screens. */
.clients li img{
  width:calc(var(--logo-w,170px) * var(--logo-scale,1));
  max-width:100%;height:auto;display:block;
  filter:grayscale(100%);opacity:.7;
  transition:opacity .4s var(--ease),filter .4s var(--ease);
}
.clients li:hover img{opacity:1;filter:grayscale(0%)}
/* The logos are black ink on transparency; on the dark page they are
   flipped to white so they read the same way round. */
:root[data-theme="dark"] .clients li img{filter:grayscale(100%) invert(1)}
:root[data-theme="dark"] .clients li:hover img{filter:grayscale(0%) invert(1)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .clients li img{filter:grayscale(100%) invert(1)}
  :root:not([data-theme="light"]) .clients li:hover img{filter:grayscale(0%) invert(1)}
}

/* ══════════════ CATEGORY INDEX HEADING ══════════════ */
.section-head{padding:4px 0 30px}
.section-head h1{
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;line-height:1.2;
}

/* ══════════════ ERROR PAGE ══════════════ */
.lost{
  min-height:calc(100vh - var(--head) - var(--bar) - 230px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 0 56px;
}
.lost-code{
  font-family:var(--font-text);
  font-size:clamp(80px,14vw,180px);font-weight:300;line-height:.9;
  letter-spacing:.02em;
  letter-spacing:.02em;color:var(--ink);
}
.lost-rule{width:52px;height:1px;background:var(--rule);margin:34px 0 30px}
.lost-title{
  font-family:var(--font-text);
  font-size:19px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:16px;
}
.lost-note{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.9;max-width:430px;
}
.lost-links{
  margin-top:40px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.lost-links a{position:relative;padding-bottom:3px;color:var(--ink-soft);transition:color .25s}
.lost-links a:hover{color:var(--ink)}
.lost-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.lost-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ══════════════ PROJECT FOOT NAV ══════════════ */
.footnav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:70px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.footnav a:hover{color:var(--ink)}

/* ══════════════ FOOTER ══════════════ */
.foot{
  border-top:1px solid var(--rule);margin-top:90px;padding:26px 0 0;
  display:flex;justify-content:space-between;align-items:center;
  font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-faint);
}
.foot a:hover{color:var(--ink)}

/* ══════════════ DARK ══════════════ */
/* Only the colour tokens move. Every rule above already reads them, so
   nothing else needs a dark variant. The theme follows the system until
   someone presses the switch, after which their choice is remembered. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e0e0e;
    --ink:#f2f2f2;
    --ink-soft:#a2a2a2;
    --ink-faint:#767676;
    --rule:#282828;
    --plate:#1a1a1a;
    --clients:#8a8a8a;
    --clients-head:#5e5e5e;
    --essay-body:#c8c8c8;
    --sign:#c0c0c0;
    --lang-rule:#3a3a3a;
  }
}
:root[data-theme="dark"]{
  --paper:#0e0e0e;
  --ink:#f2f2f2;
  --ink-soft:#a2a2a2;
  --ink-faint:#767676;
  --rule:#282828;
  --plate:#1a1a1a;
  --clients:#8a8a8a;
  --clients-head:#5e5e5e;
  --essay-body:#c8c8c8;
  --sign:#c0c0c0;
  --lang-rule:#3a3a3a;
}
/* imagery is lit for a white page; take the glare off it on a dark one */
:root[data-theme="dark"] .plate img,
:root[data-theme="dark"] .plate video{filter:brightness(.92)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .plate img,
  :root:not([data-theme="light"]) .plate video{filter:brightness(.92)}
}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:1100px){
  :root{--gutter:5vw}
  .bar-in{gap:34px;font-size:9px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .bar-in::-webkit-scrollbar{display:none}
  .clients ul{grid-template-columns:repeat(3, minmax(0,1fr));gap:40px 40px}
  .clients{--logo-scale:.9}
}
@media(max-width:860px){
  :root{--gutter:4vw;--head:70px;--stack-gap:2px}
  .clients ul{grid-template-columns:repeat(2, minmax(0,1fr));gap:34px 28px;max-width:520px;margin:0 auto}
  .clients{--logo-scale:.72}
  /* There is no room to hold the wordmark in the centre with the links
     pinned beside it, so on a phone the masthead stacks: wordmark, then
     the language pair, the links and the switch on one row under it. */
  .head{padding-top:12px}
  .head-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
           gap:9px 14px;padding:2px 0 10px}
  .wordmark{flex:0 0 100%;text-align:center;font-size:15px;letter-spacing:.12em}
  .head-top{order:2;margin-top:0;gap:12px}
  .lang{gap:6px;font-size:9px}
  .head-nav{order:3;gap:14px;font-size:9px}
  /* categories scroll horizontally rather than being crushed */
  .bar{position:static;height:auto;padding-bottom:14px}
  .bar-in{justify-content:flex-start}
  .bar-in{
    justify-content:flex-start;gap:24px;font-size:9.5px;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .bar-in::-webkit-scrollbar{display:none}
  .about{grid-template-columns:1fr;gap:30px}
  .about-text{max-width:none;text-align:left}
  .contact-card{max-width:none}
  .essay{margin-top:48px}
  .essay h1{font-size:19px;letter-spacing:.11em}
  /* captions are always legible without a pointer */
  .cap{opacity:1;transform:none;padding:16px 18px}
  .plate.light::after{opacity:1}
  .cap b{font-size:11.5px}
  .cap i,.cap s{font-size:11px}
  .lost{min-height:0;padding:64px 0 40px}
  .lost-title{font-size:22px}
}
@media(max-width:620px){
  .clients ul{grid-template-columns:1fr;gap:30px 0}
  .clients{--logo-scale:.78}
  .foot{flex-direction:column;align-items:flex-start;gap:9px;line-height:1.6}
  .footnav{font-size:9px;gap:16px}
  .contact-list li{grid-template-columns:1fr;gap:4px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}