/* The four offer pages only (services, cyprus, company, community). Its
   own file so the front page, which inlines site.css, does not carry it.
   Linked after site.css. */

/* ── the closing block, composed across the width ─────────────────────
   On a wide screen the question stands on the left, the text and the two
   ways to write on the right; below 900px it stays one column. */
.cta__p a { color: var(--fg); }
@media (min-width: 900px) {
  .cta { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(24px, 3vw, 40px); align-items: start; padding-block: clamp(96px, 11vw, 168px); }
  .cta__h { grid-column: 1 / 8; grid-row: 1 / span 2; max-width: none; font-size: clamp(2rem, .9rem + 3.3vw, 4.4rem); }
  .cta__p { grid-column: 8 / 13; grid-row: 1; max-width: 38ch; padding-top: .3em; }
  .cta__row { grid-column: 8 / 13; grid-row: 2; }
}

/* ── services: every cell is one link ─────────────────────────────────
   A cell without a page of its own opens WhatsApp and says so beside the
   same arrow. */
.cell__go { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; font-size: .875rem; font-weight: 600; color: var(--fg-2); }
a.cell:hover .cell__go, a.cell:focus-visible .cell__go { color: var(--fg); }
.svx__lead { max-width: 52ch; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; }
.svx .line { border-top: 1px solid var(--line); }
.svx:last-of-type, .svx--last { padding-bottom: clamp(56px, 8vw, 120px); }
.svx + .cta { border-top: 0; }
@media (max-width: 820px) {
  .cell:has(.cell__go) { grid-template-columns: minmax(0, 1fr); }
  .cell__go { grid-column: 1; padding-top: 4px; }
  .cell .cell__go .arr { grid-column: auto; grid-row: auto; align-self: center; }
}

/* ── "or start somewhere else": the heading asked for seven of twelve
   columns in a grid that has one, which cut the cards short ─────────── */
.all--on .all__h, .all--on .all__grid { grid-column: 1 / -1; }

/* ── the fact lists: one face down the figures column ─────────────────
   Word cells take the light, wide cut of the numbers, smaller, since a
   word runs longer than a figure. */
.gv__n--w { font-weight: 300; font-stretch: 125%; letter-spacing: -.035em; font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.9rem); line-height: 1.04; padding-right: .5em; }

/* ── the story block: no blank band under it ──────────────────────── */
.story { padding-block: clamp(64px, 8vw, 120px); }
/* /company.html: the block as text, the statement left, the reasons right */
.story--txt .story__txt { grid-column: 1 / -1; }
@media (min-width: 821px) {
  .story--txt .story__in { align-items: start; }
  .story--txt .story__txt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .story--txt .story__h { grid-column: 1 / 7; grid-row: 1 / span 4; margin: 0; }
  .story--txt .story__txt > p, .story--txt .story__who { grid-column: 7 / 13; }
  .story--txt .story__txt > p { max-width: 38ch; }
}

/* ── /company.html: the plate carries its three lines at the plate's own
   size, the name at the top of the sheet, the number at its foot ────── */
.op__card { container-type: inline-size; width: min(64%, 260px); }
.op__card p { top: 38%; bottom: 8%; left: 8%; right: 20%; grid-template-rows: 1fr auto auto; gap: 1.2cqi; font-size: max(.8125rem, 4.3cqi); }
.op__card b { font-size: 10cqi; line-height: 1; align-self: start; }
.op__card .mono { font-size: 9.6cqi; white-space: nowrap; }
@media (min-width: 900px) {
  .op__card { width: min(100%, 50vh); }
}

/* ── community ────────────────────────────────────────────────────── */
/* the navigation over the photograph: more night at the top */
.hx__img::after { background: linear-gradient(180deg, rgb(11 11 10 / .86) 0%, rgb(11 11 10 / .6) 14%, rgb(11 11 10 / .14) 44%, rgb(11 11 10 / .85) 100%); }
.hx__lead { max-width: 44ch; }
/* in one column the paragraph starts on the heading's left edge (it was
   pushed to the right edge, which read as a stray indent on a tablet) */
@media (max-width: 899px) { .who2__p { justify-self: start; } }
/* the heading leads its rows, not the other way round */
.svc__g { font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); }
.svc__t { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); line-height: 1; letter-spacing: -.03em; }
.svc__p { padding-top: 0; }
.svc__row { padding-block: clamp(24px, 3vw, 40px); align-items: baseline; }
/* the dark band: both columns start at the same line */
@media (min-width: 821px) {
  .flow--pic .flow__in { align-items: start; }
  .flow--pic .flow__list { align-self: start; }
}