/* ==========================================================================
   Daniel Motta — Illusionista ed Escapologo
   Tema: Nero / Bianco / Argento metallizzato
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500&family=Unbounded:wght@600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Base metallica */
  --black:        #08090a;
  --black-soft:   #111215;
  --panel:        #16171b;
  --panel-2:      #1c1d22;
  --line:         #35373e;
  --line-soft:    #24252a;

  /* Argento */
  --silver-dim:   #7d818b;
  --silver:       #b9bdc6;
  --silver-bright:#e9ebef;
  --white:        #ffffff;

  --metal-gradient: linear-gradient(115deg, #6d707a 0%, #d7dae0 22%, #f5f6f8 42%, #9a9ea8 58%, #e2e4e9 76%, #797d87 100%);
  --metal-gradient-soft: linear-gradient(180deg, rgba(233,235,239,.14), rgba(233,235,239,0));

  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-name: 'Unbounded', 'Bodoni Moda', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  background:var(--black);
  color:var(--silver-bright);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  width:100%;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--silver); color:var(--black); }

/* Focus visibile per accessibilità */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:1.5px solid var(--silver-bright);
  outline-offset:3px;
}

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

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--white);
  margin:0 0 .5em;
  letter-spacing:.01em;
}
h1{ font-size:clamp(2.6rem, 6vw, 5rem); line-height:1.02; font-weight:500; letter-spacing:-.01em; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.08; }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); line-height:1.25; }

p{ margin:0 0 1.1em; color:var(--silver); max-width:62ch; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--silver-bright); }

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em;
  color:var(--silver-dim); text-transform:uppercase; margin-bottom:1em;
}
.kicker::before{
  content:''; width:28px; height:1px; background:var(--metal-gradient);
}
.kicker-plain::before{ content:none; width:0; }
.metal-shine{
  background:linear-gradient(100deg,
    #4d5058 0%, #eef0f3 14%, #ffffff 24%, #b2b6bf 34%,
    #62656e 48%, #f5f6f8 62%, #ffffff 70%, #9a9ea8 84%, #4d5058 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine-sweep 7s ease-in-out infinite;
}
.chi-sono-name{ font-family:var(--font-name); font-weight:700; }
.kicker-display{
  font-family:var(--font-name); font-weight:600;
  font-size:1.15rem; letter-spacing:0; text-transform:none;
}
/* .kicker is inline-flex, so an ancestor's text-align:center already
   centers it as an inline box — no extra rule needed for .cta-band */

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.9em;
  font-family:var(--font-body); font-size:.92rem; font-weight:500; letter-spacing:.02em;
  border:1px solid var(--line);
  background:transparent;
  color:var(--white);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;
}
.btn:hover{ border-color:var(--silver-bright); background:rgba(233,235,239,.06); transform:translateY(-1px); }

.btn-solid{
  background:var(--metal-gradient);
  color:#0a0a0b;
  border:none;
  font-weight:600;
}
.btn-solid:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,10,.78);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:88px;
}
.brand{
  font-family:var(--font-name); font-weight:700; font-size:1.15rem; color:var(--white);
  display:flex; flex-direction:column; align-items:flex-start; gap:.15em; letter-spacing:-.01em;
  line-height:1.1;
}
.brand span{ color:var(--silver-dim); font-size:.72em; font-weight:400; font-family:var(--font-body); letter-spacing:.08em; text-transform:uppercase; }

.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.main-nav ul{ list-style:none; display:flex; gap:2.1rem; margin:0; padding:0; }
.main-nav a{
  font-size:.92rem; color:var(--silver); position:relative; padding-bottom:4px;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--metal-gradient); transition:right .25s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--white); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }

.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:1px solid var(--line); color:var(--white);
  width:44px; height:44px; cursor:pointer; transition:border-color .2s ease;
}
.nav-toggle:hover{ border-color:var(--silver-bright); }
.nav-toggle .bar{
  width:18px; height:1px; background:var(--silver-bright);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 880px){
  .main-nav{
    position:fixed; inset:88px 0 0 0; background:var(--black-soft);
    z-index:150;
    flex-direction:column; align-items:flex-start; padding:2.2rem var(--gutter);
    transform:translateX(100%); transition:transform .35s ease;
    border-top:1px solid var(--line-soft);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:1.5rem; width:100%; }
  .main-nav a{ font-size:1.3rem; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:92vh; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; border-bottom:1px solid var(--line-soft);
}
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--black); }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,9,10,0) 0%, rgba(8,9,10,.05) 55%, rgba(8,9,10,.8) 82%, rgba(8,9,10,.98) 100%);
}
.hero-content{
  position:relative; z-index:1; padding-block:4rem clamp(9rem,18vw,14rem); width:100%;
  text-align:center;
  animation:hero-rise .9s cubic-bezier(.16,.84,.44,1) both .1s;
}
.hero .kicker{
  font-size:1rem; font-weight:800; margin-bottom:1.2rem;
  background:linear-gradient(100deg,
    #4d5058 0%, #eef0f3 14%, #ffffff 24%, #b2b6bf 34%,
    #62656e 48%, #f5f6f8 62%, #ffffff 70%, #9a9ea8 84%, #4d5058 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.85)) drop-shadow(0 0 20px rgba(0,0,0,.6));
  animation:shine-sweep 7s ease-in-out infinite;
}
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero h1{
  font-family:var(--font-name);
  font-weight:700;
  font-size:clamp(2.6rem, 6.6vw, 5.4rem);
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
  background:linear-gradient(100deg,
    #4d5058 0%, #eef0f3 14%, #ffffff 24%, #b2b6bf 34%,
    #62656e 48%, #f5f6f8 62%, #ffffff 70%, #9a9ea8 84%, #4d5058 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 28px rgba(0,0,0,.75));
  animation:shine-sweep 7s ease-in-out infinite;
}
@keyframes shine-sweep{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero .lede{
  max-width:46ch; margin-top:0; margin-inline:auto;
  font-size:clamp(1.02rem, 1.7vw, 1.22rem); font-weight:400;
  text-shadow:0 2px 12px rgba(0,0,0,.8), 0 0 24px rgba(0,0,0,.5);
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; justify-content:center; }

/* Static hero (pagine interne senza video) */
.page-hero{
  padding-block:6.5rem 3.5rem;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 60% 100% at 15% 0%, rgba(185,189,198,.08), transparent 60%);
}

/* ---------- Sezioni generiche ---------- */
section{ padding-block:clamp(4rem,8vw,7rem); }
.section-tight-top{ padding-top:clamp(1.5rem,3vw,2.5rem); }
.section-line{ border-top:1px solid var(--line-soft); }

.split{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:start;
}
@media (max-width:840px){ .split{ grid-template-columns:1fr; } }

.split-reverse{ grid-template-columns:1.15fr .85fr; }
@media (max-width:840px){ .split-reverse{ grid-template-columns:1fr; } }

.figure{
  position:relative; border:1px solid var(--line); overflow:hidden;
}
.figure::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(233,235,239,.08);
}
.figure img, .figure video{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.figure:hover img, .figure:hover video{ transform:scale(1.04); }

/* ---------- Citazione editoriale (sostituisce immagini segnaposto) ---------- */
.pull-quote{
  border-left:2px solid var(--silver-dim);
  border-image:var(--metal-gradient) 1;
  padding-left:1.4rem;
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.35rem, 2.4vw, 1.8rem);
  line-height:1.4; color:var(--silver-bright);
}
.pull-quote cite{ display:block; margin-top:1rem; font-family:var(--font-body); font-style:normal; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--silver-dim); }

/* ---------- Cards / servizi (trattamento non-SaaS: pannelli con bordo metallico superiore) ---------- */
.panel-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.panel-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .panel-grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .panel-grid{ grid-template-columns:1fr; } }

.panel{
  background:var(--panel); padding:clamp(2rem,4vw,3rem);
  position:relative; transition:background .25s ease;
}
.panel:hover{ background:var(--panel-2); }
.panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--metal-gradient);
}
.panel h3{ margin-bottom:.6em; }
.panel .video-link{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1rem;
  font-size:.88rem; color:var(--silver-bright); border-bottom:1px solid var(--line);
  padding-bottom:.3em; transition:border-color .2s ease, gap .2s ease;
}
.panel .video-link:hover{ border-color:var(--silver-bright); gap:.85em; }
.play-mark{
  width:22px; height:22px; border:1px solid var(--silver); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.play-mark::after{
  content:''; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--silver-bright);
  margin-left:2px;
}

/* ---------- Marquee nome ripetuto (dalla home originale) ---------- */
.name-marquee{
  overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding-block:1.6rem;
  white-space:nowrap;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.name-marquee .track{
  display:inline-block; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.8rem,5vw,3.2rem); color:var(--line);
  animation:scroll-left 28s linear infinite;
}
.name-marquee .track span{ margin-inline:1.4em; color:var(--silver-dim); }
@keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .name-marquee .track{ animation:none; } }

/* ---------- Liste con marker metallico ---------- */
.metal-list{ list-style:none; margin:0; padding:0; }
.metal-list li{
  display:flex; gap:1em; padding-block:1.1em; border-top:1px solid var(--line-soft);
  color:var(--silver);
}
.metal-list li:last-child{ border-bottom:1px solid var(--line-soft); }
.metal-list li::before{
  content:''; width:6px; height:6px; margin-top:.55em; flex:none;
  background:var(--metal-gradient);
}
.metal-list strong{ color:var(--white); font-weight:600; }

/* Piccolo elenco puntato compatto, usato dentro i pannelli */
.dot-list{ list-style:none; margin:0; padding:0; }
.dot-list li{
  position:relative; padding-left:1.1em; margin-bottom:.5em;
  color:var(--silver);
}
.dot-list li:last-child{ margin-bottom:0; }
.dot-list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%;
  background:var(--metal-gradient);
}

/* ---------- Specifiche tecniche (mosaici) ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:2rem; }
.spec-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .spec-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .spec-grid{ grid-template-columns:1fr; } }
.spec{ background:var(--panel); padding:1.8rem 2rem; }
.spec .num{ font-family:var(--font-display); font-size:2.1rem; color:var(--silver-bright); display:block; }
.spec .label{ font-size:.82rem; color:var(--silver-dim); text-transform:uppercase; letter-spacing:.08em; }

/* ---------- CTA banda finale ---------- */
.cta-band{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(4rem,8vw,6rem);
  text-align:center;
}
.cta-band h2{ max-width:20ch; margin-inline:auto; }
.cta-band .btn{ margin-top:1.6rem; }

/* ---------- Contatti ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:2.5rem; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  background:var(--panel); padding:2.4rem 2rem; text-align:left;
  display:flex; flex-direction:column; gap:1rem;
  transition:background .25s ease, transform .25s ease;
}
.contact-card:hover{ background:var(--panel-2); transform:translateY(-3px); }
.contact-card:hover .icon{ border-color:var(--silver-bright); }
.contact-card .icon{ transition:border-color .25s ease; }
.contact-card .icon{
  width:46px; height:46px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.contact-card .icon svg{ width:20px; height:20px; stroke:var(--silver-bright); fill:none; }
.contact-card .label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--silver-dim); }
.contact-card .value{ font-family:var(--font-display); font-size:1.3rem; color:var(--white); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line-soft); padding-block:3rem;
  background:var(--black-soft);
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;
}
.footer-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.footer-nav a{ font-size:.85rem; color:var(--silver-dim); }
.footer-nav a:hover{ color:var(--silver-bright); }
.footer-social{ display:flex; gap:1rem; }
.footer-social a{
  width:38px; height:38px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease;
}
.footer-social a:hover{ border-color:var(--silver-bright); }
.footer-social svg{ width:16px; height:16px; fill:var(--silver-bright); }
.copyright{ font-size:.78rem; color:var(--silver-dim); }

/* ---------- Duo di sezioni cliccabili (Magia / Mosaici) ---------- */
.feature-duo{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  gap:1px; background:var(--line-soft);
}
@media (max-width:840px){ .feature-duo{ grid-template-columns:1fr; } }

.feature-tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  min-height:clamp(420px, 50vw, 560px);
  background:var(--panel); overflow:hidden;
  padding:clamp(2rem,4vw,3.4rem);
  text-decoration:none; color:inherit;
}
.feature-tile .tile-media{ position:absolute; inset:0; z-index:0; }
.feature-tile .tile-media video, .feature-tile .tile-media img{
  width:100%; height:100%; object-fit:cover; transition:transform .8s ease;
}
.feature-tile:hover .tile-media video, .feature-tile:hover .tile-media img{ transform:scale(1.06); }
.feature-tile .tile-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,10,.9) 0%, rgba(8,9,10,.45) 35%, rgba(8,9,10,.1) 65%, rgba(8,9,10,.15) 100%);
  transition:background .4s ease;
}
.feature-tile:hover .tile-media::after{
  background:linear-gradient(180deg, rgba(8,9,10,.8) 0%, rgba(8,9,10,.35) 35%, rgba(8,9,10,.05) 65%, rgba(8,9,10,.1) 100%);
}

/* Variante senza foto: motivo a griglia segnaposto che richiama i tasselli del cubo */
.feature-tile.cube-motif{
  background:
    repeating-linear-gradient(0deg, rgba(185,189,198,.06) 0, rgba(185,189,198,.06) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(90deg, rgba(185,189,198,.06) 0, rgba(185,189,198,.06) 1px, transparent 1px, transparent 46px),
    var(--panel);
  transition:background-color .4s ease;
}
.feature-tile.cube-motif:hover{ background-color:var(--panel-2); }

.tile-content{ position:relative; z-index:1; }
.tile-content h2{ margin:0; }

/* ---------- Foto ritratto personale (segnaposto) ---------- */
.figure-portrait{
  max-width:480px; aspect-ratio:3/4;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(185,189,198,.045) 0, rgba(185,189,198,.045) 1px, transparent 1px, transparent 14px),
    var(--panel);
}

/* Segnaposto riutilizzabile per qualsiasi spazio foto vuoto */
.figure-empty{
  background:
    repeating-linear-gradient(45deg, rgba(185,189,198,.045) 0, rgba(185,189,198,.045) 1px, transparent 1px, transparent 14px),
    var(--panel);
}

/* Griglia di più foto affiancate (es. galleria mosaici) */
.photo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
@media (max-width:760px){ .photo-grid{ grid-template-columns:1fr; } }

/* Striscia di foto a piena larghezza pagina */
.no-pad{ padding-block:0; }
.mega-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  margin-inline:clamp(1rem, 3vw, 2.2rem);
  border:1px solid var(--line);
}
@media (max-width:900px){ .mega-strip{ grid-template-columns:repeat(2,1fr); } }
.mega-strip img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  filter:saturate(1.18) contrast(1.03);
  transition:filter .35s ease, transform .5s ease;
}
.mega-strip img:hover{ filter:saturate(1.35) contrast(1.05); transform:scale(1.03); }

/* ---------- Testimonianze ---------- */
.testimonial-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
@media (max-width:960px){ .testimonial-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .testimonial-grid{ grid-template-columns:1fr; } }

.testimonial-card{
  background:var(--panel); padding:clamp(1.8rem,3vw,2.4rem);
  position:relative; transition:background .25s ease;
}
.testimonial-card:hover{ background:var(--panel-2); }
.testimonial-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--metal-gradient);
}
.testimonial-mark{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:2.6rem; line-height:1; margin-bottom:.6rem;
  background:var(--metal-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.testimonial-quote{
  font-family:var(--font-display); font-style:italic; color:var(--silver-bright);
  font-size:1.05rem; line-height:1.5; margin-bottom:1.1rem;
}
.testimonial-name{ font-size:.85rem; color:var(--white); font-weight:600; margin:0; }
.testimonial-name span{
  display:block; font-weight:400; font-size:.8rem; color:var(--silver-dim); margin-top:.2em;
}

/* ---------- Utility ---------- */
.mt-lg{ margin-top:2.5rem; }
.mt-2{ margin-top:2rem; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.footer-brand{ margin-bottom:.6rem; }
.figure-4-3{ aspect-ratio:4/3; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--white); color:var(--black);
  padding:.6em 1em; z-index:200;
}
.skip-link:focus{ left:1rem; top:1rem; }