/* ============================================================================
   The footer
   Navy, because the page above it is white and the marques below are five
   colours: a dark foot ends the document without competing with any of them.
   ========================================================================= */
/* No margin above it: the marque rows are full-bleed colour and end at their own
   edge, so a white gap between the last one and the footer reads as a mistake. */
.mc-foot{
  position:relative; overflow:hidden;
  /* Downward only, like every open marque field above it: the top of the foot is
     the lighter stop, so it meets the last row without a step, and it sinks
     toward the name. Nothing on the page is deeper than the bottom of this. */
  background:linear-gradient(180deg, var(--mc-deep) 0%, var(--mc-deep) 38%, var(--mc-deep-2) 100%);
  color:rgba(255,255,255,.82);
}
.mc-foot__in{
  display:grid; gap:var(--s-7);
  grid-template-columns:minmax(0,1fr);
  padding-block:var(--s-9) var(--s-8);
  position:relative; z-index:1;
}
@media (min-width:760px){
  .mc-foot__in{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-6); }
}

.mc-foot__logo{ min-height:44px; align-items:center; display:inline-flex !important;
  display:inline-block; margin-bottom:var(--s-4);
  font-size:var(--t-h3); font-weight:700; letter-spacing:-.010em;
  color:#FFFFFF; text-decoration:none;
}
.mc-foot__say{
  margin:0 0 var(--s-5); max-width:38ch;
  font-size:var(--t-small); line-height:1.6; color:rgba(255,255,255,.78);
}
.mc-foot__lead .mc-btn{ min-height:44px; }

.mc-foot__h{
  margin:0 0 var(--s-4);
  font-size:var(--t-label); font-weight:600; letter-spacing:.060em;
  text-transform:uppercase; color:rgba(255,255,255,.52);
}
.mc-foot__col ul{ margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:var(--s-1); }
.mc-foot__col a, .mc-foot__col span{
  font-size:var(--t-small); line-height:1.4; color:rgba(255,255,255,.86);
  text-decoration:none;
}
.mc-foot__col a{
  /* a link in a footer still has to look like a link: an underline that is there
     from the start, not one that appears when a mouse happens to arrive */
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.28);
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:text-decoration-color var(--m-quick) var(--e-out), color var(--m-quick) var(--e-out);
  display:inline-flex; align-items:center; min-height:44px;
}
.mc-foot__col a:hover{ color:#FFFFFF; text-decoration-color:#FFFFFF; }
.mc-foot__col a:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.mc-foot__col b{ color:#FFFFFF; font-weight:600; }
.mc-foot__quiet{ color:rgba(255,255,255,.56) !important; max-width:26ch; }

/* ---- the signature -------------------------------------------------------
   Not an ornament dropped in a corner: the name set to the exact width of the
   container and cropped by the foot of the page, the way a building carries its
   name cut into the wall. The size is driven by the container, not guessed —
   1em of this face at this tracking measures ~0.5 of the string's width, so
   the clamp below lands within a few pixels of the gutters at every width, and
   the crop hides the rest.
   ========================================================================= */
.mc-foot__sign{
  --gut:var(--mc-gutter-d);
  position:relative; z-index:0;
  max-width:var(--mc-container); margin:0 auto;
  padding-inline:var(--mc-gutter-d);
  height:clamp(3.2rem, 8.2vw, 8.6rem);   /* the visible slice of the letters */
  overflow:hidden;
}
.mc-foot__mark{
  display:block; white-space:nowrap;
  /* Measured, not guessed. At this face and this tracking the string "IV MOTORCLASS"
     renders 7.0126px wide for every 1px of font-size — so dividing the width that is
     actually available by that number sets the type to the exact measure of the text
     above it. Change the string or the tracking and this ratio has to be measured
     again; it is the one number here that is not free. */
  --gut:var(--mc-gutter-d);
  --fit-ratio: 7.0126;
  font-size:calc((min(100vw, var(--mc-container)) - 2 * var(--gut, 32px)) / var(--fit-ratio));
  line-height:.78;
  font-weight:700; letter-spacing:-.045em;

  /* Tone on tone, lighter, lit from above. The carved version — letters darker than
     the ground — was black type on navy once the ground went this deep: seen at 2x,
     a black sticker. There is no "darker" left below a ground at L .14. So the name
     is a whisper LIGHTER than the ground, 12% white at the top of the letters falling
     to 4% at the foot, and the whole slice still fades downward through the mask.
     No stroke, no shadow: the light does the work, the way it does on an embossed
     name in a dark wall. */
  color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.30) 100%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.30) 100%);
}
@media (max-width:760px){
  .mc-foot__sign{ padding-inline:var(--mc-gutter-m); }
  .mc-foot__mark{ --gut:var(--mc-gutter-m); }
}

.mc-foot__legal{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3);
  padding-block:var(--s-3) var(--s-4);
  border-top:1px solid rgba(255,255,255,.10);
  font-size:var(--t-label); color:rgba(255,255,255,.60);
}
.mc-foot__legal a{
  color:rgba(255,255,255,.78); text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.24); text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px;
}
.mc-foot__legal a:hover{ color:#FFFFFF; text-decoration-color:#FFFFFF; }
.mc-foot__legal-sep{ opacity:.4; }

/* The phone dock sits over the very bottom of the page. The clearance goes on
   the footer itself, under the legal line, as ground — not as padding inside the
   legal block, which made a 12px line 209px tall and pushed the name to a 51px
   sliver: the one thing to be seen, the least seen. */
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  body:has(.cat-dock) .mc-foot{
    padding-bottom:calc(var(--mc-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  /* These stay here, not in the portrait block below, because this query also
     catches a phone held sideways — 844x390, where the width is a desktop's and
     the height is not. Moved out, a landscape phone got the desktop's 96px of
     top padding on a 390px-tall screen. The portrait block overrides them. */
  .mc-foot__in{ padding-block:var(--s-8) var(--s-6); gap:var(--s-6); }
  .mc-foot__sign{ height:clamp(3.4rem, 15vw, 6rem); }
}

/* ---- the phone -----------------------------------------------------------
   The four-column footer above reads well on a desktop. Stacked on a phone it
   was that same footer with the columns underneath each other — 1,099px, one
   and a third screens, none of it decided for this screen. Everything here is
   phone-only; nothing above is touched.

   It has to sit AFTER the base rules, not beside the other phone block near the
   top of the file: put there, `.mc-foot__legal{display:grid}` lost to the
   `display:flex` further down and only the properties the base rule did not
   set survived. Source order is the whole of the specificity story here.

   The name looks like a size problem and is not. Measured at this face and
   tracking, "IV MOTORCLASS" needs 7.0128px of width per 1px of size — the CSS
   above says 7.0126 — so the 358px between the gutters puts it at 51px and
   there is nowhere else for it to go. Breaking it over two lines buys 51 -> 59,
   16%, and costs a line with "IV" alone on it. What fails at 51px is contrast:
   12% white on this navy carries at the desktop's 166px and disappears at a
   third of it. So the tone comes up and the mask lets go later — the same
   whisper, at a size where it can still be heard. It is aria-hidden ornament,
   and its words are in the logo above, so 1.4.3 does not reach it. */
@media (max-width:759.98px){
  /* read at arm's length, not across a desk */
  .mc-foot__in{ padding-block:var(--s-7) var(--s-5); gap:var(--s-5); }
  .mc-foot__h{ margin-bottom:var(--s-2); }
  .mc-foot__say{ margin-bottom:var(--s-4); max-width:34ch; }

  /* Four short labels do not need four rows, and neither do a phone number and
     a WhatsApp link. Two columns; the mail address and the town span both,
     because "jvmotorclass@gmail.com" is 150 of the 171px a column has. */
  .mc-foot__col ul{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-4); }
  .mc-foot__col li:has(a[href^="mailto"]),
  .mc-foot__col li:has(> span){ grid-column:1 / -1; }

  .mc-foot__sign{ height:clamp(3.4rem, 15vw, 6rem); }
  .mc-foot__mark{
    /* background-image, NOT the `background` shorthand: the shorthand resets
       background-clip to border-box, and the base rule's `background-clip: text`
       is what makes these letters letters. Overridden with the shorthand, the
       name rendered as a solid grey slab. */
    background-image:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.09) 100%);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.86) 60%, rgba(0,0,0,.55) 100%);
            mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.86) 60%, rgba(0,0,0,.55) 100%);
  }

  /* The legal line wrapped mid-list and left a separator hanging at the right
     edge with nothing after it. The copyright takes its own row and the two
     links sit side by side, so there is nothing left to separate. */
  .mc-foot__legal{
    display:grid; grid-template-columns:1fr 1fr; align-items:center;
    gap:0 var(--s-4); padding-block:var(--s-2) var(--s-3);
  }
  .mc-foot__legal > span:first-child{ grid-column:1 / -1; }
  .mc-foot__legal-sep{ display:none; }
}

/* ==========================================================================
   WHERE — the footer opens on a band of the map
   ======================================================================== */
.mc-foot__place{ position:relative; }
.mc-foot__band{
  position:relative; height:clamp(17rem, 30vw, 27rem); overflow:clip;
  /* faded into the navy on all four sides: ground, not a picture */
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%),
               linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask:linear-gradient(180deg, transparent 0, #000 22%, #000 72%, transparent 100%),
               linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-composite:intersect;
}
.mc-foot__img, .mc-foot__band .mp-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }

/* The point: a white dot, a ring that breathes out three times, and the name. */
.mc-foot__pin{
  position:absolute; left:50%; top:50%; z-index:1; width:12px; height:12px; translate:-50% -50%;
  border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 0 24px 6px rgba(120,160,230,.35);
}
.mc-foot__pin::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(255,255,255,.75); opacity:0;
  animation:mc-foot-ping 2.4s var(--e-out) .4s 3;
}
@keyframes mc-foot-ping{ 0%{ opacity:.8; scale:1; } 100%{ opacity:0; scale:3.4; } }
.mc-foot__pin b{
  position:absolute; left:calc(100% + 10px); top:50%; translate:0 -120%;
  font-size:var(--t-small); font-weight:700; letter-spacing:.02em; color:#FFFFFF; white-space:nowrap;
  text-shadow:0 0 4px #0A1731, 0 0 10px #0A1731;
}

/* The words, over the sea (bottom right) on a desk; under the band on a phone. */
.mc-foot__say-where{ position:relative; z-index:2; display:flex; justify-content:flex-end; }
.mc-foot__say-where > div{ display:grid; justify-items:start; gap:var(--s-1); max-width:26rem; }
/* Always under the band. Over the sea it collided with the coast at 1000px
   and only cleared it by chance at 1440: where the coast falls depends on the
   band's height, so no placement over the drawing holds at every width.
   (A stray "}" here swallowed the next rule until 2026-10-05: the phone got the
   desk's right alignment, x 147 instead of the gutter.) */
.mc-foot__say-where{ justify-content:flex-start; margin-top:calc(-1 * var(--s-5)); }
@media (min-width:760px){ .mc-foot__say-where{ justify-content:flex-end; } }
@media (max-width:759.98px){ .mc-foot__band{ height:16rem; } }
.mc-foot__place-h{ margin:0; max-width:14ch; font-size:var(--t-h3); font-size:clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight:700; letter-spacing:-.02em; line-height:1.05; color:#FFFFFF; }
.mc-foot__say-where p{ margin:0; font-size:var(--t-small); line-height:1.5; color:rgba(255,255,255,.82); }
.mc-foot__maps{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-small); font-weight:600; color:#FFFFFF;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px;
}
.mc-foot__maps:hover{ text-decoration-color:#FFFFFF; }
.mc-foot__maps:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.mc-foot__osm{ font-size:var(--t-label); line-height:1.4; color:rgba(255,255,255,.55); }
/* the columns start closer: the band already gave the footer its air */
.mc-foot__place + .mc-foot__in{ padding-top:var(--s-7); }

/* ==========================================================================
   THE DRAWING — shared by the footer band and /contacto (map-draw.js)
   is-armed: inlined, undrawn. is-drawn: a third of it on screen.
   Coast 0-1.6s · rivers and motorways from .3s, 70ms apart · sea .4-1.6s ·
   minor roads 1.0-2.0s · the point and the names at 1.7s.
   ======================================================================== */
.is-armed .mp-coast path, .is-armed .mp-river path, .is-armed .mp-r0 path{
  stroke-dasharray:1 2; stroke-dashoffset:1;
}
.is-armed .mp-sea, .is-armed .mp-r1, .is-armed .mp-r2{ opacity:0; }
.is-armed .mc-foot__pin, .is-armed .ct-pin, .is-armed .ct-place{ opacity:0; }
.is-armed .mc-foot__pin{ scale:.3; }
.is-armed .mc-foot__pin::after{ animation:none; }

.is-drawn .mp-coast path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--e-inout); }
.is-drawn .mp-river path,
.is-drawn .mp-r0 path{ stroke-dashoffset:0;
  transition:stroke-dashoffset 1.3s var(--e-inout) calc(.3s + var(--i, 0) * 70ms); }
.is-drawn .mp-sea{ opacity:1; transition:opacity 1.2s var(--e-out) .4s; }
.is-drawn .mp-r1{ opacity:1; transition:opacity 1s var(--e-out) 1s; }
.is-drawn .mp-r2{ opacity:1; transition:opacity 1s var(--e-out) 1.2s; }
.is-drawn .mc-foot__pin{ opacity:1; scale:1; transition:opacity .3s var(--e-out) 1.7s, scale .5s cubic-bezier(.34,1.56,.64,1) 1.7s; }
.is-drawn .mc-foot__pin::after{ animation:mc-foot-ping 2.4s var(--e-out) 2s 3; }
.is-drawn .ct-pin, .is-drawn .ct-place{ opacity:1; transition:opacity .4s var(--e-out) 1.7s; }
.is-drawn .ct-place--air{ transition-delay:1.9s; }
@media (prefers-reduced-motion:reduce){ .mc-foot__pin::after{ animation:none; } }
/* a halo of the sea's own colour: where a road near the coast passes behind a
   letter, the letter wins */
.mc-foot__say-where h2, .mc-foot__say-where p{ text-shadow:0 0 8px #040B1F, 0 0 18px #040B1F; }

/* focus on navy: a white ring, not the ink one that disappears */
.mc-foot :focus-visible{ outline-color:#FFFFFF; }