/* Market Entry · Service 04 · market-entry.html
   The datasheet of the market. Split-title hero in the family grammar,
   stat wall of sourced figures, checklist, stage table, sector desks.
   Built on styles.css tokens. Reuses .mono, .acc, .rv, .stairsdiv.
   Scoped under main.p-mentry. */

main.p-mentry{ --muted:#5c655f; --deep:#2a3a35; }

.p-mentry .me-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ---------- section rhythm ---------- */
.p-mentry .me-sec{ position:relative; padding-top:clamp(3rem,7vh,5rem); padding-bottom:clamp(1rem,3vh,2rem) }
.p-mentry .me-h2{ font-size:clamp(1.55rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.025em;
  line-height:1.06; max-width:26ch; margin-bottom:1.6rem }
.p-mentry .me-body{ font-size:clamp(1.02rem,1.6vw,1.28rem); line-height:1.5; max-width:62ch }
.p-mentry .me-quiet{ margin-top:1.4rem; color:var(--muted); line-height:1.7; max-width:70ch; font-size:.97rem }
/* inline links in body copy wear the same teal rule as the case row, so the page
   never shows a default browser blue */
.p-mentry .me-body a{ color:var(--teal); text-decoration:none; border-bottom:1px solid var(--line) }
.p-mentry .me-body a:hover{ border-bottom-color:var(--teal) }

/* ---------- 1 · hero (family split-title grammar) ---------- */
.p-mentry .me-hero{ padding-top:clamp(6.5rem,14vh,10.5rem) }
.p-mentry .me-title{ display:block; font-family:var(--sans); font-weight:500;
  font-size:clamp(3.4rem,10.6vw,9.6rem); line-height:.95; letter-spacing:-.03em }
.p-mentry .me-title-a{ color:var(--teal) }
.p-mentry .me-title-b{ color:var(--paper) }

.p-mentry .me-stack{ position:relative; display:grid; grid-template-areas:"stack";
  margin:1.6rem calc(-1 * var(--gutter)) 0 }
.p-mentry .me-hero-img{ grid-area:stack; margin:0; overflow:hidden; position:relative;
  background:var(--teal-deep); min-height:100% }
.p-mentry .me-hero-img img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%; display:block }
.p-mentry .me-hero-img::after{ content:""; position:absolute; inset:0;
  background:var(--teal-deep); opacity:.5; pointer-events:none }

.p-mentry .me-hero-over{ grid-area:stack; position:relative; z-index:1;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  gap:clamp(2.5rem,8vh,5rem);
  padding:clamp(1.2rem,3vh,2rem) var(--gutter)
    calc(clamp(160px,32vh,340px) + 2rem);
  min-height:clamp(30rem,78vh,46rem) }

.p-mentry .me-panel{ background:var(--paper); color:var(--ink);
  padding:clamp(1.2rem,2.5vw,1.8rem); width:min(33rem,100%); align-self:flex-end }
.p-mentry .me-lede{ font-size:clamp(1rem,1.6vw,1.22rem); line-height:1.45; color:var(--deep); margin:0 }
.p-mentry .me-kick{ margin:1.1rem 0 0; color:var(--teal-deep) }

.p-mentry .me-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-top:1.4rem }
.p-mentry .me-btn{ display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:1rem 1.7rem; text-decoration:none; transition:background .3s, color .3s }
.p-mentry .me-solid{ background:var(--teal); color:var(--white) }
.p-mentry .me-solid:hover{ background:var(--teal-deep) }
.p-mentry .me-brkt{ padding:1rem .4rem; color:var(--teal); transition:letter-spacing .3s var(--e-out), color .3s }
.p-mentry .me-brkt:hover{ color:var(--ink); letter-spacing:.14em }

.p-mentry .me-stairs{ height:clamp(160px,32vh,340px) }

@media (max-width:820px){
  .p-mentry .me-hero-over{ padding-bottom:calc(160px + 1.5rem); min-height:34rem }
  .p-mentry .me-stairs{ height:160px }
  .p-mentry .me-panel{ width:100% }
}
@media (max-width:640px){
  .p-mentry .me-hero-img img{ object-position:62% 16% }
}
@media (min-width:641px) and (max-width:1023px){
  .p-mentry .me-hero{ padding-top:16.5rem }
}

/* ---------- 2 · the market ---------- */
.p-mentry .me-wall{ overflow:hidden }
.p-mentry .me-wall > :not(.me-iraq){ position:relative; z-index:1 }
.p-mentry .me-iraq{ position:absolute; z-index:0; inset-inline-end:clamp(0rem,4vw,4rem); top:50%;
  transform:translateY(-50%); height:min(92%,32rem); width:auto; opacity:.07;
  fill:var(--teal-deep); pointer-events:none }
@media (max-width:560px){ .p-mentry .me-iraq{ inset-inline-end:-4rem; height:70%; opacity:.05 } }

/* ---------- the market: two readings on one rule (2026-09-09) ----------
   Two numbers, printed at the size the claim deserves, split by a hairline with
   the Iraq silhouette behind them. The sources sit on a common baseline. */
.p-mentry .mk{ display:grid; grid-template-columns:1fr; margin-top:1.8rem;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line) }
@media (min-width:820px){ .p-mentry .mk{ grid-template-columns:1fr 1fr } }
.p-mentry .mk-fig{ display:flex; flex-direction:column; padding:clamp(1.8rem,4vh,2.8rem) 0 }
@media (min-width:820px){
  .p-mentry .mk-fig + .mk-fig{ border-inline-start:1px solid var(--line);
    padding-inline-start:clamp(2rem,4vw,3.4rem) }
  .p-mentry .mk-fig:first-child{ padding-inline-end:clamp(2rem,4vw,3.4rem) }
}
@media (max-width:819px){ .p-mentry .mk-fig + .mk-fig{ border-top:1px solid var(--line) } }
.p-mentry .mk-n{ font-family:var(--display); font-weight:500; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:.92; color:var(--ink);
  font-size:clamp(2.8rem,7vw,6.2rem) }
[dir="rtl"] .p-mentry .mk-n{ letter-spacing:0; line-height:1.15; font-size:clamp(2rem,4.6vw,4rem) }
.p-mentry .mk-claim{ margin:1.4rem 0 0; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.5;
  max-width:30ch; color:var(--deep) }
.p-mentry .mk-src{ margin:auto 0 0; padding-top:1.6rem; font-size:.6rem; line-height:1.7; color:var(--muted) }
.p-mentry .mk-src a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.p-mentry .mk-src a:hover{ color:var(--teal) }

/* ---------- the manifest: the ten things a company gets ----------
   A numbered register. The numeral says how many are left, the term names the
   item, the sentence says what it is. Same grammar as the standard pages. */
.p-mentry .me-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem }
.p-mentry .me-count{ color:var(--muted); flex:0 0 auto }
[dir="rtl"] .p-mentry .me-count{ letter-spacing:0 }
.p-mentry .mf{ list-style:none; margin:1.8rem 0 0; padding:0; counter-reset:m;
  border-top:1px solid var(--ink) }
.p-mentry .mf-row{ counter-increment:m; display:grid; grid-template-columns:1fr; gap:.35rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line) }
.p-mentry .mf-row:last-child{ border-bottom:0 }
@media (min-width:760px){
  .p-mentry .mf-row{ grid-template-columns:2.6rem 15rem minmax(0,52ch); gap:1.6rem; align-items:baseline }
}
.p-mentry .mf-row::before{ content:counter(m,decimal-leading-zero); font-family:var(--mono);
  font-size:.68rem; letter-spacing:.09em; color:var(--teal) }
.p-mentry .mf-t{ font-family:var(--display); font-weight:500; font-size:1.1rem; line-height:1.3;
  letter-spacing:-.01em; color:var(--ink); margin:0 }
[dir="rtl"] .p-mentry .mf-t{ letter-spacing:0; font-size:1.15rem }
.p-mentry .mf-row p{ margin:0; font-size:1rem; line-height:1.55; color:var(--deep) }

/* ---------- the one company, printed as a case ---------- */
.p-mentry .cs{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-top:1.6rem;
  padding:clamp(1.8rem,4vh,2.6rem) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line) }
@media (min-width:820px){ .p-mentry .cs{ grid-template-columns:20rem minmax(0,1fr); gap:clamp(2rem,4vw,4rem) } }
.p-mentry .cs-sector{ display:block; font-family:var(--display); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.05; color:var(--ink) }
[dir="rtl"] .p-mentry .cs-sector{ letter-spacing:0; line-height:1.25 }
.p-mentry .cs-place{ display:block; margin-top:.7rem; color:var(--muted) }
[dir="rtl"] .p-mentry .cs-place{ letter-spacing:0 }
.p-mentry .cs-p{ margin:0; font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.55; max-width:58ch }
.p-mentry .cs-a{ display:inline-block; margin-top:1.3rem; color:var(--teal); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:.15rem; transition:border-color .3s, color .3s }
.p-mentry .cs-a:hover{ border-bottom-color:var(--teal); color:var(--teal-deep) }
.p-mentry .cs-note{ margin:1.8rem 0 0; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.6rem; line-height:1.7; color:var(--muted); max-width:46ch }
[dir="rtl"] .p-mentry .cs-note{ letter-spacing:0; font-size:.72rem }

/* ---------- 7 · faq ---------- */
.p-mentry .me-faq .acc-head{ font-size:clamp(1rem,1.75vw,1.28rem); line-height:1.35; padding:1.15rem 0;
  align-items:flex-start }
.p-mentry .me-faq .acc-plus{ font-size:1rem; padding-top:.18rem }
.p-mentry .me-faq .acc-body p{ font-family:var(--sans); font-size:1rem; letter-spacing:0;
  text-transform:none; line-height:1.6; max-width:74ch; padding-bottom:1.4rem }

/* Bruno Ace SC is wide and "Registration" is the longest word in the family of
   split heroes. The global rule floors the size at 2.8rem, which fits the word
   exactly at 390px and clips it on every phone narrower than that. Below 390 the
   size tracks the viewport instead, so the word always lands inside the gutter.
   Measured: the word renders 7.97x the font-size, the gutter is 1rem each side. */
@media (max-width:389px){
  html .p-mentry .me-title{ font-size:calc(12vw - 4px) }
}