/* ============================================================================
   Home
   ========================================================================= */

/* ---- the hero -------------------------------------------------------------
   A 2:3 night photograph of a 911's tail. Measured on a 24x16 grid: white text
   holds at 7:1 or better on almost all of it — the one weak region is the lit
   building at the top-left (1.65:1). The car's hero, the light bar, sits at
   42% down; the wheel at 60%. So the wide crop is centred at 46% (band 32–60%
   at 2.4:1) and the words go LOW LEFT, over the bumper and the tarmac, where
   the photograph itself carries them; the search card sits on the black body
   to the right, where nothing is lost under it. */
.hm-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--mc-deep-2);
  min-height:34rem;
}
.hm-hero__img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 46%;
}
/* a floor under the words only; the body of the car keeps its black */
.hm-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,6,26,.34) 0%, rgba(2,6,26,0) 30%, rgba(2,6,26,0) 55%, rgba(2,6,26,.62) 100%),
    linear-gradient(100deg, rgba(2,6,26,.40) 0%, rgba(2,6,26,.10) 40%, rgba(2,6,26,0) 60%);
}
.hm-hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) 24rem; gap:var(--s-8);
  align-items:end; padding-block:var(--s-8) var(--s-8); min-height:inherit;
}
.hm-hero__copy{ align-self:end; }
.hm-hero__eyebrow{ display:block; margin-bottom:var(--s-3);
  font-size:var(--t-label); font-weight:500; letter-spacing:.030em; color:#FFFFFF; }
.hm-hero__h{ margin:0 0 var(--s-4); font-size:var(--t-display); line-height:1.02;
  letter-spacing:-.026em; color:#FFFFFF; max-width:12ch; }
.hm-hero__p{ margin:0; max-width:40ch; font-size:var(--t-sub); line-height:1.5; color:rgba(255,255,255,.92); }
.hm-hero__credit{ display:block; margin-top:var(--s-4); font-size:var(--t-label);
  letter-spacing:.020em; color:rgba(255,255,255,.62); }

/* ---- the search card ------------------------------------------------------
   The one thing on the page that looks like car-planet's, because it does what
   theirs does. 10px: it is a cluster of controls, an action surface, and the
   action radius is 10. */
.hm-search{
  background:var(--mc-surface); color:var(--mc-ink);
  border-radius:var(--mc-r); box-shadow:var(--mc-shadow-2, 0 12px 40px rgba(0,0,0,.35));
  padding:var(--s-5) var(--s-5) var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-4);
}
.hm-search__tabs{ display:flex; gap:var(--s-2); margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0;
  border-bottom:1px solid var(--mc-hairline); }
.hm-search__tab{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 var(--s-4);
  font-size:var(--t-ui); font-weight:600; color:var(--mc-ink-2); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.hm-search__tab.is-on{ color:var(--mc-ink); border-bottom-color:var(--mc-ink); }
.hm-search__tab--link{ color:var(--mc-blue); }
.hm-search__tab--link:hover{ text-decoration:underline; text-underline-offset:3px; }
.hm-search__tab--link:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:-3px; }
.hm-search__h{ margin:var(--s-1) 0 0; font-size:var(--t-h3); letter-spacing:-.012em; color:var(--mc-ink); }
.hm-f{ display:flex; flex-direction:column; gap:var(--s-2); }
.hm-f > span{ font-size:var(--t-label); font-weight:500; color:var(--mc-ink-2); }
.hm-f .mc-input{ width:100%; }
.hm-f__note{ font-size:var(--t-label); line-height:1.4; color:var(--mc-ink-3); }
.hm-f__note b{ color:var(--mc-ink-2); font-weight:600; }
.hm-seg{ display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--mc-control); border-radius:var(--mc-r); overflow:hidden; }
.hm-seg__o{ position:relative; display:block; }
.hm-seg__o input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.hm-seg__o span{ display:flex; align-items:center; justify-content:center; min-height:44px;
  font-size:var(--t-ui); font-weight:500; color:var(--mc-ink-2); background:var(--mc-surface);
  transition:background var(--m-quick) var(--e-out), color var(--m-quick) var(--e-out); }
.hm-seg__o input:checked + span{ background:var(--mc-ink); color:#FFFFFF; font-weight:600; }
.hm-seg__o input:focus-visible + span{ outline:3px solid var(--mc-blue); outline-offset:-3px; }
.hm-search__go{ width:100%; min-height:52px; margin-top:var(--s-1); font-size:var(--t-ui); }
.hm-search__go b{ font-weight:700; color:inherit; }   /* a global b{} rule put ink on the blue */
.hm-search__go[disabled]{ opacity:.55; cursor:not-allowed; }

@media (max-width:900px){
  /* The card leaves the photograph and takes the ground below it: over a tall
     phone crop it would sit on the car itself, and the car is the point. */
  .hm-hero{ min-height:0; display:grid; }
  /* At 4:5 the band is 84% of the frame's height. Centred at 44% it ran 7–91%
     and brought the white road marking (86–95% of the photograph) in under the
     words: 3.89:1 at 900px. At 18% the band is 3–86% — the marking is out, the
     wing (30%) and the light bar (42%) are in. */
  /* 4:5 of a 900px tablet is a 1125px photograph before the form even starts —
     1675px of hero. Capped at 78vh: the car is still whole (object-fit cover keeps
     the band centred on it) and the search is reachable without a full screen of
     scrolling first. */
  .hm-hero__img{ position:relative; aspect-ratio:4 / 5; height:auto; max-height:78vh; width:100%; grid-area:1/1; }
  /* measured at 900px: the sub line fell to 3.83:1 — the stacked layout puts the
     words higher on the frame, over the wet tarmac's highlights, so the floor
     starts earlier and lands heavier */
  .hm-hero::after{ grid-area:1/1; position:relative; inset:auto;
    background:linear-gradient(180deg, rgba(2,6,26,0) 28%, rgba(2,6,26,.62) 60%, rgba(2,6,26,.94) 100%); }
  /* The wrapper dissolves (display:contents) so the copy and the card become the
     hero's own grid items: the copy shares the photograph's cell and sits at ITS
     foot; the card takes the row below. With the wrapper kept, its height was
     copy + card, so the copy sat at the TOP of the frame — over the lit building
     — which is what 2.64:1 at 900px was. */
  .hm-hero__in{ display:contents; }
  .hm-hero__copy{ grid-area:1/1; z-index:2; align-self:end;
    padding:var(--s-6) var(--mc-gutter-m); width:100%; box-sizing:border-box; }
  .hm-hero__h{ max-width:none; }
  .hm-search{ grid-area:2/1; border-radius:0; box-shadow:none; padding-inline:var(--mc-gutter-m); }
  .hm-search__tabs{ margin-inline:calc(var(--mc-gutter-m) * -1); }
  .hm-hero__img{ object-position:50% 40%; }   /* the words are at the foot again: centre the band on the car */
}

/* ---- the marques -------------------------------------------------------- */
.hm-marques{ background:var(--mc-surface); border-bottom:1px solid var(--mc-hairline); }
.hm-marques__list{ margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.hm-marques__list > li + li{ border-left:1px solid var(--mc-hairline); }
.hm-marque{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  padding:var(--s-7) var(--s-4); text-decoration:none; color:var(--mc-ink);
  transition:background var(--m-quick) var(--e-out);
}
.hm-marque:hover{ background:var(--mc-bg); }
.hm-marque:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:-3px; }
.hm-marque__logo{ width:64px; height:64px; background:var(--mc-ink);
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat;
  transition:transform var(--m-quick) var(--e-out); }
.hm-marque:hover .hm-marque__logo{ transform:translateY(-2px); }
.hm-marque__name{ font-size:var(--t-ui); font-weight:600; letter-spacing:-.006em; }
.hm-marque__n{ font-size:var(--t-label); color:var(--mc-ink-3); font-variant-numeric:tabular-nums; }
.hm-marque.is-empty .hm-marque__logo{ background:var(--mc-control); }
.hm-marque.is-empty .hm-marque__name{ color:var(--mc-ink-2); }
@media (max-width:760px){
  .hm-marques__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hm-marques__list > li:nth-child(4){ border-left:0; }
  .hm-marques__list > li:nth-child(n+4){ border-top:1px solid var(--mc-hairline); }
  .hm-marque{ padding:var(--s-5) var(--s-3); }
  .hm-marque__logo{ width:48px; height:48px; }
}

/* ---- sections ----------------------------------------------------------- */
.hm-sec{ padding-block:var(--s-9) 0; }
.hm-sec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
  flex-wrap:wrap; margin-bottom:var(--s-6); }
.hm-h2{ margin:0; font-size:var(--t-h2); letter-spacing:-.018em; color:var(--mc-ink); }
.hm-sec__p{ margin:0; font-size:var(--t-small); color:var(--mc-ink-2); }
.hm-sec__head .mc-link{ display:inline-flex; align-items:center; min-height:44px; }
.hm-sec__more{ margin:var(--s-4) 0 0; font-size:var(--t-small); color:var(--mc-ink-3); }

/* the rail of what is available: the catalogue's own card, scrolled */
.home-rail{ margin-inline:calc(var(--mc-gutter-d) * -1); padding-inline:var(--mc-gutter-d); }
.home-rail__in{ display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:var(--s-3); overscroll-behavior-x:contain;
  /* a carousel that moves by itself (inicio script): no scrollbar under it — the
     client: "în loc de bara de jos, să fie carusel automat" */
  scrollbar-width:none; }
.home-rail__in::-webkit-scrollbar{ display:none; }
.home-rail__in > *{ flex:0 0 15.5rem; scroll-snap-align:start; }
@media (max-width:768px){
  .home-rail{ margin-inline:calc(var(--mc-gutter-m) * -1); padding-inline:var(--mc-gutter-m); }
  .home-rail__in > *{ flex:0 0 72vw; max-width:19rem; }
}

/* the people */
.hm-wall__grid{ margin:0; padding:0; list-style:none; display:grid; gap:var(--s-5);
  grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .hm-wall__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); } }

/* steps */
/* ---- how it actually goes ----------------------------------------------
   A route down the page, not a row across it. The number is the loud element —
   the same device the contact page uses for a distance — and the copy beside it
   has room to be a sentence. Four equal columns are what turned these into
   one-word slogans, three of which were not true.

   The rule and its square markers are one object: the rule is on the list, the
   squares are on the steps, and both are pinned to the same 4.5px centre line so
   a step added tomorrow lands on it without a number being touched. */
.hm-how__head{ max-width:54ch; margin-bottom:var(--s-7); }
.hm-how__list{ position:relative; margin:0; padding:0; list-style:none; }
/* The spine sits on the column boundary, so it is the same line the numbers end
   at and the words begin at — one edge doing both jobs instead of a marker rail
   floating 45px to the left of everything it marks. */
.hm-how__list::before{
  content:""; position:absolute; left:5.5rem; top:0; bottom:0;
  width:1px; background:var(--mc-rule);
}
.hm-how__step{
  position:relative;
  display:grid; grid-template-columns:5.5rem minmax(0,1fr); column-gap:var(--s-6);
  align-items:start; padding-block:var(--s-5);
}
.hm-how__step + .hm-how__step{ border-top:1px solid var(--mc-hairline); }
/* the stop, square, because nothing on this site has a radius */
.hm-how__step::before{
  content:""; position:absolute; left:calc(5.5rem - 4px); top:calc(var(--s-5) + .48em);
  width:9px; height:9px; background:var(--mc-ink);
}
/* The column is a fixed width and the words start at its edge, so 01 and 04 line
   up whatever the figures measure — DM Sans has no tabular set, and asking for
   one left the four headings on four different left margins. */
.hm-how__n{
  font-size:var(--t-h1); font-weight:700; line-height:.86; letter-spacing:-.03em;
  color:var(--mc-ink);
}
.hm-how__t h3{ margin:0 0 var(--s-2); font-size:var(--t-h3); color:var(--mc-ink); }
.hm-how__t p{ margin:0; max-width:56ch; font-size:var(--t-prose);
  line-height:1.55; color:var(--mc-ink-2); }
/* 44px of target without 44px of gap: the box is padded, the space is taken back */
.hm-how__t .mc-link{
  display:inline-flex; align-items:center; min-height:44px; margin-top:calc(-1 * var(--s-3));
}
@media (max-width:640px){
  /* the number goes above the words: at 390px a 34px figure and a 32px gutter
     left fourteen characters to the line, which is not a sentence any more */
  .hm-how__list::before, .hm-how__step::before{ display:none; }
  .hm-how__step{ grid-template-columns:minmax(0,1fr); row-gap:var(--s-2); }
  .hm-how__n{ font-size:var(--t-h3); color:var(--mc-ink-3); }
}

/* questions — left, like everything else; the measure is on the rows, not the wrap,
   or the whole block centres itself inside the container */
.hm-q{ max-width:60ch; }
.hm-q{ border-top:1px solid var(--mc-hairline); }
.hm-q:last-of-type{ border-bottom:1px solid var(--mc-hairline); }
.hm-q summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s-4);
  align-items:center; min-height:56px; padding:var(--s-3) 0;
  font-size:var(--t-ui); font-weight:600; color:var(--mc-ink); }
.hm-q summary::-webkit-details-marker{ display:none; }
.hm-q summary::after{ content:"+"; font-weight:400; font-size:1.4em; color:var(--mc-ink-3); }
.hm-q[open] summary::after{ content:"−"; }
.hm-q summary:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:2px; }
.hm-q p{ margin:0 0 var(--s-4); font-size:var(--t-prose); line-height:1.55; color:var(--mc-ink-2); max-width:52ch; }

/* the ask */
.hm-cta{ margin-top:var(--s-9); background:var(--mc-band); }
.hm-cta__in{ padding-block:var(--s-8); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); }
.hm-cta__h{ margin:0; font-size:var(--t-h2); letter-spacing:-.018em; color:var(--mc-ink); }
.hm-cta__p{ margin:0 0 var(--s-2); max-width:48ch; font-size:var(--t-prose); color:var(--mc-ink-2); }

/* the dock is a phone thing */
@media (min-width:769px){ .cat-dock{ display:none; } }
@media (max-width:768px), (max-height:520px) and (orientation:landscape){
  body:has(.cat-dock) main{ padding-bottom:0; }
}

/* ---- what they wrote ----------------------------------------------------
   One row, travelling left to right on its own, for ever. Each card is a
   photograph until it nears the middle of the row, where it turns over and
   becomes what that person wrote.

   The card is the photograph's own shape — height x the picture's aspect
   ratio, read from the file — so NOTHING IS CROPPED: measured on the real
   files, the old band showed 49% of a 3:4 photo's height and the old column
   beside the text 78% of its width, and no object-position is right for a
   photograph nobody has seen yet. The words on the back are set a notch smaller
   when they would not otherwise fit that width. */
.hm-fb{ padding-block:var(--s-9); background:var(--mc-band); }
/* The measure belongs to the paragraph, not to the wrap: cat-wrap carries
   margin-inline:auto, so a max-width on that same element centred the whole
   heading block on a page that is left-aligned everywhere else. */
.hm-fb__head{ margin-bottom:var(--s-7); }
.hm-fb__head .hm-sec__p{ max-width:56ch; }

/* The only control that stops it, and it is not there until a keyboard finds
   it. Moving content has to be stoppable; a button parked under the row for
   ever is the widget chrome this section exists to avoid. */
.hm-fb__halt{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.hm-fb__halt:focus{
  position:static; width:auto; height:auto; overflow:visible;
  display:inline-flex; align-items:center; min-height:44px;
  margin:0 0 var(--s-4) var(--mc-gutter-d); padding-inline:var(--s-4);
  background:var(--mc-surface); border:1px solid var(--mc-ink); border-radius:var(--mc-r-card);
  font-size:var(--t-label); font-weight:600; color:var(--mc-ink);
  outline:3px solid var(--mc-blue); outline-offset:2px;
}

.hm-fb__rail{
  --fb-h:35rem;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;
  /* Not a container with the cards clipped at its edge — a window they pass
     through. Three stops with the middle one at 20% alpha: a plain two-stop
     gradient is linear in alpha and reads as a grey haze; held near
     transparent for half the band and then ramped, cards appear to emerge.
     Linear ships exactly this curve at 64px. In px, so it does not resize. */
  --fade:5.5rem;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0, rgba(0,0,0,.2) calc(var(--fade) / 2), #000 var(--fade),
    #000 calc(100% - var(--fade)), rgba(0,0,0,.2) calc(100% - var(--fade) / 2), transparent 100%);
          mask-image:linear-gradient(to right,
    transparent 0, rgba(0,0,0,.2) calc(var(--fade) / 2), #000 var(--fade),
    #000 calc(100% - var(--fade)), rgba(0,0,0,.2) calc(100% - var(--fade) / 2), transparent 100%);
}
.hm-fb__rail::-webkit-scrollbar{ display:none; }
.hm-fb__rail:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:-3px; }
/* flex-shrink:0, and it is not belt-and-braces: a flex line is laid out against
   the box you can SEE, and left shrinkable Safari squeezed all 24 cards into
   1440px — 22-35px slivers with neighbours painted over them. */
.hm-fb__row{ display:flex; flex:0 0 auto; gap:var(--s-5); padding-inline:var(--s-5) 0; align-items:stretch; }

/* ---- the card: two faces ---- */
.fb{
  margin:0;
  /* Longhands, not the shorthand: WebKit mishandles a custom property in the
     flex basis slot, and a card whose basis silently fails has no width. */
  flex-grow:0; flex-shrink:0; flex-basis:var(--w);
  width:var(--w); height:var(--fb-h);
  perspective:1600px;
}
.fb__flip{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transform:rotateY(var(--flip, 0deg));
  will-change:transform;
}
/* No border and no mat. A rule around a photograph reads as a frame, and a
   framed photograph reads as a widget's slot rather than as somebody's picture.
   Under the image there is only the section's own colour, so on the rare image
   whose shape the card cannot express there is nothing to see rather than a
   visible surround. A soft shadow instead: it sits them on the page as objects
   without drawing a line around them. */
.fb__face{
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:0; border-radius:var(--mc-r-card);
  /* two layers: a tight one that seats it, a wide soft one that lifts it */
  box-shadow:0 1px 2px rgba(var(--mc-scrim), .10), 0 14px 40px -12px rgba(var(--mc-scrim), .22);
}
.fb__face--front{ background:var(--mc-band); }
/* contain, never cover: the box is already the picture's shape, so there is
   nothing to letterbox — and a picture the shape cannot express is matted whole
   rather than trimmed. */
.fb__face--front img{ display:block; width:100%; height:100%; object-fit:contain; }
.fb__face--back{
  transform:rotateY(180deg); background:var(--mc-surface);
  display:flex; flex-direction:column; gap:var(--s-4); padding:var(--s-7) var(--s-6) var(--s-6);
}
/* the mark that opens a quotation, set large and light — the one flourish */
.fb__face--back::before{
  content:"\201C"; display:block; height:.5em; margin-top:-.1em;
  font-size:calc(var(--t-h1) * 1.15); line-height:1; font-weight:700;
  color:var(--mc-rule);
}
/* --scale is 1 for 20 of the 24; it steps down only when a card cannot
   otherwise hold the words at the photograph's width. The scroll is a safety
   net for text no card of any width could hold, and never otherwise shows. */
.fb__q{ margin:0; font-size:calc(var(--t-prose) * var(--scale, 1)); line-height:1.55;
  color:var(--mc-ink-2); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
/* the byline sits on its own short rule, the same device the contact page uses */
.fb__by{ margin-top:auto; padding-top:var(--s-4); font-size:var(--t-label); font-weight:600;
  letter-spacing:.02em; color:var(--mc-ink); position:relative; }
.fb__by::before{ content:""; position:absolute; top:0; left:0; width:2.5rem; height:1px; background:var(--mc-rule); }

/* ---- the two buttons, and nothing else ---- */
.hm-fb__step{
  display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  margin-top:var(--s-6);
}
.hm-fb__nav{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0; cursor:pointer;
  background:var(--mc-surface); border:1px solid var(--mc-rule); color:var(--mc-ink);
  border-radius:var(--mc-r-card);
  transition:background var(--m-quick) var(--e-out), border-color var(--m-quick) var(--e-out),
             color var(--m-quick) var(--e-out), transform var(--m-instant) var(--e-out);
}
.hm-fb__nav:hover{ background:var(--mc-ink); border-color:var(--mc-ink); color:var(--mc-surface); }

.hm-fb__nav:active{ transform:scale(.96); }
.hm-fb__nav:focus-visible{ outline:3px solid var(--mc-blue); outline-offset:2px; }

/* ---- static: reduced motion, or no script ----
   Nothing moves and nothing turns over, so the back of a card would never be
   seen. The two faces stack instead — photograph, then words — and the row is
   an ordinary scroller holding every review whole. */
html:not(.js) .fb, .hm-fb.is-static .fb{ height:auto; perspective:none; }
html:not(.js) .fb__flip, .hm-fb.is-static .fb__flip{ transform:none; transform-style:flat; height:auto; }
html:not(.js) .fb__face, .hm-fb.is-static .fb__face{
  position:static; transform:none; box-shadow:none;
  backface-visibility:visible; -webkit-backface-visibility:visible;
}
html:not(.js) .fb__face--front img, .hm-fb.is-static .fb__face--front img{ height:auto; aspect-ratio:var(--ratio); }
html:not(.js) .hm-fb__step{ display:none; }

@media (max-width:999px){
  /* One card at a time. The same rule — the card is the picture's own shape —
     with the height fixed so cards do not stand ragged, and the width capped so
     a landscape picture is never wider than the screen. */
  /* the browser keeps the page's vertical scroll; the horizontal swipe is ours */
  .hm-fb__rail{ --fade:1.5rem; --fb-h:min(64vh, 30rem); touch-action:pan-y; }
  .hm-fb__row{ gap:var(--s-4); padding-inline:var(--mc-gutter-m) 0; }
  .fb{
    flex-basis:min(88vw, calc(var(--fb-h) * var(--ratio)));
    width:min(88vw, calc(var(--fb-h) * var(--ratio)));
  }
  /* 16px on top, not 24: the 901-character review was 3px short at the smallest type
     step, and buying it with 16px more card height cost five photographs a 3% deeper mat. */
  .fb__face--back{ padding:var(--s-4) var(--s-5) var(--s-5); }
  /* the words' own type step for THIS box — solved in the controller against
     the phone's 496x343, not carried over from a desktop card up to 30% wider */
  .fb__q{ font-size:calc(var(--t-prose) * var(--scale-m, var(--scale, 1))); }
  html:not(.js) .fb, .hm-fb.is-static .fb{ height:auto; }
  /* Wide, --flip changes every frame with the card's position, so a transition
     would only lag it. On a phone the sequence sets it in one go, and the turn
     itself has to be seen: a card that snaps from picture to words looks like a
     swap, not a turn. */
  .fb__flip{ transition:transform calc(var(--m-reveal) * 1.5) var(--e-inout); }
}

/* two doors at the end of the page: into the stock, or the other way round */
.hm-cta__go{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3); }

/* ============================================================================
   WHERE ELSE HE IS
   ---------------------------------------------------------------------------
   Below the reviews: the photographs above are 25 people who bought, this is the
   600,000 who watched. Proof first, reach second.

   Not three equal tiles. TikTok is the one that works, so it takes the section
   and the other two take a line. Three logos in a row would state a symmetry
   that is not true, and would spend the only number here big enough to make
   anyone press anything.

   The number IS the picture. Set on TikTok's own black, carrying TikTok's own
   chromatic split — cyan #25F4EE and red #FE2C55, the two halves of their mark —
   offset and resolving into register as it arrives. The device belongs to the
   platform being linked to, which is what keeps it from being an ornament.
   ========================================================================= */
.hm-soc{
  background:#000000;                 /* TikTok's ground, not --mc-deep: this
                                         section is quoting them, and the footer
                                         below is the navy, so the two do not
                                         merge into one long dark stretch */
  color:#FFFFFF;
  padding-block:var(--s-10);
  overflow:clip;                      /* the ghosts travel; clip, never hidden */
}
@media (max-width:759.98px){ .hm-soc{ padding-block:var(--s-8); } }

.hm-soc__in{
  display:grid; gap:var(--s-7);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:1000px){
  /* The sentence across the top, then the number and the ways in on one row.
     The first attempt put the list in a column of its own spanning both rows and
     centred: it finished 120px above the number and left the bottom right of the
     section empty, which on a black band is a hole rather than air. Reading order
     and visual order stay the same, so there is nothing to explain to a screen
     reader. */
  .hm-soc__in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--s-8); align-items:start; }
  .hm-soc__say{  grid-column:1 / -1; grid-row:1; }
  .hm-soc__num{  grid-column:1; grid-row:2; }
  .hm-soc__list{ grid-column:2; grid-row:2; align-self:start; }
}

.hm-soc__kick{ margin:0 0 var(--s-4); font-size:var(--t-prose); color:rgba(255,255,255,.66); }
.hm-soc__h{ margin:0; color:#FFFFFF; max-width:20ch; }
.hm-soc__p{
  margin:var(--s-5) 0 0; max-width:52ch;
  font-size:var(--t-prose); line-height:1.6; color:rgba(255,255,255,.72);
}

/* ---- the number -----------------------------------------------------------
   Three copies stacked: cyan behind, red behind, white on top. At rest they are
   in register and the split is a hairline — the same way TikTok's own mark sits.
   ========================================================================= */
.hm-soc__big{
  position:relative; margin:0; line-height:.9;
  font-size:var(--t-mega); font-weight:700; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;   /* the count must not jitter its own width */
}
.hm-soc__ghost,
.hm-soc__real{ display:block; }
.hm-soc__ghost{ position:absolute; inset:0; z-index:0; }
.hm-soc__ghost--c{ color:#25F4EE; translate:-3px 2px; }
.hm-soc__ghost--r{ color:#FE2C55; translate:3px -2px; }
.hm-soc__real{ position:relative; z-index:1; color:#FFFFFF; }

/* The arrival: the two halves come in wide and settle into register. 700ms is
   longer than the system's --m-reveal because this one is the point of the
   section rather than a section appearing; --e-out is the system's curve. */
.js .hm-soc.is-armed .hm-soc__ghost{ transition:translate 700ms var(--e-out); }
.js .hm-soc.is-armed:not(.is-in) .hm-soc__ghost--c{ translate:-28px 16px; }
.js .hm-soc.is-armed:not(.is-in) .hm-soc__ghost--r{ translate:28px -16px; }
@media (prefers-reduced-motion:reduce){
  .js .hm-soc.is-armed .hm-soc__ghost{ transition:none; }
  .js .hm-soc.is-armed:not(.is-in) .hm-soc__ghost--c{ translate:-3px 2px; }
  .js .hm-soc.is-armed:not(.is-in) .hm-soc__ghost--r{ translate:3px -2px; }
}

.hm-soc__unit{
  margin:var(--s-3) 0 0;
  font-size:var(--t-km); font-weight:500; letter-spacing:-.01em;
  color:rgba(255,255,255,.82);
}

/* ---- the ways in ----------------------------------------------------------
   Rows, not tiles. The first one is the errand — it says what pressing it does,
   not the name of an app — and it is the only filled one.

   Second pass (client: "the icons and the buttons should look better").
   Measured and looked at first: 24px grey glyphs on 82px rounded grey boxes,
   three of them the same weight, Instagram and Facebook identical but for the
   word; the list hung 140px below the top of the number beside it; and the
   rounded corners were the only rounded surfaces on a site that is square.
     - each platform's mark on a square tile in its own colours
       (partials/social-mark)
     - the two quiet rows lose their boxes and are separated by rules, the
       device the contact page's ways and the car page's ladders already use
     - square, everywhere
     - the list's top edge sits on the number's top edge
   The brand hexes are literals because they are TikTok's, Instagram's and
   Facebook's, not ours; there is nothing in mc-tokens for them to be.
   ========================================================================= */
.hm-soc__list{ list-style:none; margin:0; padding:0; display:grid; }

.hm-soc__link{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:var(--s-4); min-height:var(--mc-tap-pref);
  padding:var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  text-decoration:none; color:#FFFFFF;
  border-top:1px solid rgba(255,255,255,.16);
  transition:background var(--m-quick) var(--e-out);
}
.hm-soc__row:last-child .hm-soc__link{ border-bottom:1px solid rgba(255,255,255,.16); }
.hm-soc__link:hover{ background:rgba(255,255,255,.05); }
.hm-soc__link:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }

.hm-soc__row--lead{ margin-bottom:var(--s-4); }
.hm-soc__row--lead .hm-soc__link{
  border:0; background:#FFFFFF; color:#000000;
  /* A step more air than the quiet rows. With the boxes gone the rows grew by
     their rules and the lead measured 82px against their 83 — the one that
     works was the shortest of the three. social.mjs holds it taller. */
  padding-block:var(--s-5);
}
.hm-soc__row--lead .hm-soc__link:hover{ background:#EDEDED; }

.hm-soc__t{ display:grid; gap:2px; min-width:0; }
/* The colour is stated, not inherited. brandbook.css carries a global
   `b, strong { color: var(--mc-ink) }` which beats the white this link passes
   down: "Instagram" and "Facebook" were rendering at 1.12:1, ink on near-black.
   Invisible in a screenshot at a glance, obvious to the contrast check. */
.hm-soc__t b{ font-size:var(--t-value); font-weight:600; letter-spacing:-.01em; color:#FFFFFF; }
.hm-soc__row--lead .hm-soc__t b{ color:#000000; }
.hm-soc__t em{ font-style:normal; font-size:var(--t-small); color:rgba(255,255,255,.60); }
.hm-soc__row--lead .hm-soc__t em{ color:rgba(0,0,0,.56); }

/* ---- the marks ------------------------------------------------------------
   No tiles: each platform's own mark, at one optical size. 34px in a 36px slot
   so the labels beside all three start on one left edge. The TikTok note takes
   the row's text colour — ink on the white lead, white if it ever sits on the
   black — and keeps its cyan and red either way. */
.hm-soc__mark{ display:grid; place-items:center; width:36px; height:36px; color:inherit; }
.hm-soc__mark svg{ display:block; width:34px; height:34px; overflow:visible; }

.hm-soc__go{ width:20px; height:20px; background:currentColor; opacity:.6;
  transition:opacity var(--m-quick) var(--e-out), translate var(--m-quick) var(--e-out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat; }
.hm-soc__row--lead .hm-soc__go{ opacity:1; }
/* The arrow moves the way the link goes — out — by 2px. It is the only motion
   on the row, and it only happens under a pointer. */
.hm-soc__link:hover .hm-soc__go{ opacity:1; translate:2px -2px; }
@media (prefers-reduced-motion:reduce){ .hm-soc__link:hover .hm-soc__go{ translate:none; } }

/* the social band's own call, on black: white, underlined, not the blue link */
.hm-soc__cta{ display:inline-flex; align-items:center; min-height:44px; color:#FFFFFF; font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; }
.hm-soc__cta:hover{ text-decoration-thickness:2px; }
.hm-soc__cta:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
.hm-soc__p + .hm-soc__p{ margin-top:var(--s-3); }
.hm-search__ask{ display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:var(--s-2); font-weight:600; }
.hm-search__ask[hidden]{ display:none; }
.hm-how__more{ margin:var(--s-5) 0 0; }
.hm-how__more .mc-link{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }