/* ==========================================================================
   THE HERO — THE COMPANY RECORD AS ONE PANEL
   --------------------------------------------------------------------------
   Applied 2026-09-03 from legal-hero-lgh6 v01 "Record Panel", which was
   picked out of five. The lab stays where it is as the record of the other
   four; from here on this file is the hero's design and legal/_build.php
   emits its markup.

   WHAT IT REPLACED  Seven fact tiles in
   `repeat(auto-fit, minmax(300px, 1fr))`. That lands on four columns at
   1440, so the second row carried three tiles and an empty fourth cell —
   seven never fills a row of four — and every tile brought its own border,
   tint and shadow: twenty-one edges to read seven facts.

   WHAT IT IS NOW  One surface. The company's identity holds a tinted plate
   on the left, and the four administrative entries are the rows of a
   register on paper beside it. Uneven is no longer possible, because there
   is nothing to line up: there is one card.

   LOAD ORDER  This file is linked LAST, after site/ds.css and
   site/finish.css, so every bridge rule below repeats those files' own
   selectors at matching specificity. No !important anywhere.
   ========================================================================== */

.pg > section.hrec{
  padding: clamp(42px, 4.8vw, 76px) 0 clamp(46px, 5vw, 84px);
  background: var(--paper);
}
/* the hand-off lands the next section clear of the fixed bar */
#docs{ scroll-margin-top: calc(var(--barh) + 18px); }


/* ---------- the header, centred the way the homepage centres ---------------
   site/finish.css turns .hp-head into a two-column editorial header. That is
   right for a section in the middle of a page; this is the page's opening
   statement, and the homepage and the Google Ads page both centre theirs. */
.hrec .hp-head{
  position: relative; z-index: 1;
  display: block; text-align: center;
  max-width: 800px; margin-inline: auto;
}
.hrec .hp-head > .hp-eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(12px, 1.2vw, 16px);
}
.hrec .hp-head > .hp-h{
  max-width: none; margin: 0;
  font-size: clamp(31px, min(4.3vw, 6.5vh), 56px);
  line-height: 1.02; letter-spacing: -.045em;
}
.hrec .hp-head > .hp-sub{
  max-width: 62ch; margin: clamp(14px, 1.5vw, 19px) auto 0; padding-top: 0;
}


/* ---------- the panel ------------------------------------------------------ */
.hrec-panel{
  position: relative; z-index: 1;
  margin-top: clamp(28px, 3.2vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  border: 1px solid var(--line-b); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-m);
  overflow: hidden;
}

/* the identity plate */
.hrec-id{
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.3vw, 34px);
  background: var(--tint);
  border-right: 1px solid var(--edge);
}
.hrec-seal{
  display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 14px; background: var(--paper);
  border: 1px solid var(--edge); color: var(--accent);
}
.hrec-idk{
  margin-top: clamp(18px, 2vw, 28px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-3);
}
.hrec-idv{
  margin-top: 9px;
  font-size: clamp(19px, 1.72vw, 25px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.14; color: var(--ink);
}
.hrec-idn{ margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* the two facts that finish the identity, on the plate's own rules */
.hrec-pair{
  margin-top: auto; padding-top: clamp(20px, 2vw, 30px);
  display: grid; gap: clamp(15px, 1.5vw, 20px);
}
.hrec-pair > div{ padding-top: clamp(14px, 1.4vw, 18px); border-top: 1px solid var(--edge); }
.hrec-pair dt{
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
}
.hrec-pair dd{
  margin-top: 6px; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.014em; line-height: 1.35; color: var(--ink);
}
.hrec-pair .hrec-n{
  margin-top: 4px; font-size: 12.5px; font-weight: 400;
  line-height: 1.5; color: var(--ink-3);
}

/* the register rows. `1fr` rows, not `auto` — the identity plate is the
   taller of the two columns, and left to itself the register ended 120px
   short of the panel's own bottom edge, which is the unfinished look this
   version exists to remove. Four equal rows fill it and each row centres
   its own content. */
.hrec-reg{ display: grid; grid-auto-rows: minmax(min-content, 1fr); }
.hrec-r{
  display: grid; align-content: center;
  /* 19rem, not 15.5 — "Corporate Identity Number (CIN)" is the longest
     label and wrapped to two lines below that, which put the label column
     out of step with the three single-line ones */
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 4px clamp(20px, 2.2vw, 34px);
  padding: clamp(16px, 1.7vw, 23px) clamp(22px, 2.3vw, 34px);
}
.hrec-r + .hrec-r{ border-top: 1px solid var(--line-2); }
.hrec-r dt{
  display: flex; align-items: center; gap: 9px; min-width: 0; padding-top: 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.hrec svg.hrec-i{ width: 17px; height: 17px; color: var(--accent); }
.hrec-v{
  grid-column: 2; min-width: 0; overflow-wrap: break-word;
  font-size: 16px; font-weight: 700; line-height: 1.42;
  letter-spacing: -.014em; color: var(--ink);
}
.hrec-v.is-mono{
  font-family: var(--mono); font-size: 14.5px; font-weight: 600;
  letter-spacing: .02em; word-break: break-all;
}
.hrec-v a{ color: var(--accent); }
.hrec-v a:hover{ text-decoration: underline; }
.hrec-n{ grid-column: 2; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }


/* ---------- the hand-off --------------------------------------------------- */
.hrec-foot{
  position: relative; z-index: 1;
  margin-top: clamp(20px, 2.2vw, 30px);
  display: flex; justify-content: center;
}
.hrec-next{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 11px 22px; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--tint);
  font-size: 14px; font-weight: 650; color: var(--accent);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.hrec-next svg{ width: 15px; height: 15px; }
.hrec-next:hover{ background: #E3EDFD; border-color: var(--accent); }


/* ---------- responsive ----------------------------------------------------- */
@media (max-width: 1120px){
  .hrec-panel{ grid-template-columns: minmax(0, 1fr); }
  .hrec-id{ border-right: 0; border-bottom: 1px solid var(--edge); }
  .hrec-pair{
    margin-top: clamp(20px, 2.4vw, 28px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 40px);
  }
}

@media (max-width: 860px){
  .hrec .hp-head{ text-align: left; max-width: none; margin-inline: 0; }
  .hrec .hp-head > .hp-eyebrow{ display: flex; margin-bottom: 11px; }
  .hrec .hp-head > .hp-h{ font-size: clamp(30px, 8.6vw, 40px); letter-spacing: -.042em; }
  .hrec .hp-head > .hp-sub{ margin: 13px 0 0; max-width: none; font-size: 15px; line-height: 1.55; }
  .hrec-foot{ justify-content: flex-start; }
}

@media (max-width: 640px){
  /* an 18px inline mailto is not a tap target. legal/_home.css makes the same
     correction for .s3-mail in the verification band; this is the hero's. */
  .hrec-v a{
    display: inline-flex; align-items: center;
    min-height: 36px; margin-block: -9px;
  }
  .hrec-panel{ border-radius: 18px; }
  .hrec-id{ padding: 20px 18px; }
  .hrec-pair{ grid-template-columns: minmax(0, 1fr); }
  .hrec-r{ grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 16px 18px; }
  .hrec-r dt{ padding-top: 0; }
  .hrec-v{ grid-column: 1; }
  .hrec-n{ grid-column: 1; }
  .hrec-next{ width: 100%; justify-content: center; min-height: 48px; }
}