/* ============================================================
   SECTIONS — process, why, faq, contact
   ------------------------------------------------------------
   The sections added in the repositioning live in systems.css;
   this file now holds only the four that predate it and are
   still on the page. The about, services, technology and
   founders blocks were removed with the sections they styled.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   06 · PROCESS
   ════════════════════════════════════════════════════════════ */
/* overflow-x: clip, not hidden — clip does not make a scroll container,
   so .process__sticky below keeps working. It is here so the bled ghost
   numeral cannot widen the page, the same job .section does elsewhere. */
.process { position: relative; overflow-x: clip; }
.process__sticky { position: relative; z-index: 1; }
.process__head { padding-top: var(--sec-y); }
.process__head .statement { margin-bottom: 1.8rem; }

.process__progress {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 1px;
  background: var(--rule);
  overflow: hidden;
}
.process__progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(.05);
  transform-origin: 0 50%;
  background: var(--accent-deep);
  transition: transform .12s linear;
}

.process__viewport { padding-block: clamp(2.5rem, 6vw, 4rem) var(--sec-y); }
.process__track {
  display: flex;
  padding-inline: var(--pad-x);
  width: max-content;
  will-change: transform;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: clamp(220px, 25vw, 300px);
  padding: 0 clamp(1.5rem, 2.6vw, 2.4rem);
  border-left: 1px solid var(--rule);
}
.step::before {
  content: "";
  position: absolute;
  top: 0; left: -1px;
  width: 1px; height: 100%;
  background: var(--accent-deep);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .6s var(--ease-out);
}
@media (hover: hover) { .step:hover::before { transform: scaleY(1); } }

.step__num {
  font-family: var(--font-edit);
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-3);
  margin-bottom: .8rem;
  transition: color var(--dur) var(--ease-out);
}
@media (hover: hover) { .step:hover .step__num { color: var(--accent-deep); } }
.step__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }
.step__desc { font-size: .92rem; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════
   07 · WHY
   ════════════════════════════════════════════════════════════ */
.why__statement {
  font-family: var(--font-display);
  font-size: var(--fs-state);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: var(--track-tight);
  margin-bottom: clamp(3rem, 8vw, 5.5rem);
}
.why__statement span { display: block; }
/* Was white at 22% — a leftover from the dark theme, invisible on Linen.
   Dim enough to sit back from the line that follows, dark enough to read. */
.why__dim { color: var(--ink-dim); }
.why__hot { color: var(--ink); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
/* Each column is padded on both sides, so the text never sits against
   the divider; the column that starts a row drops its left padding and
   the one that ends it drops its right (see responsive.css for the
   two- and one-column versions). */
.value {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--rule-soft);
}
.value:first-child { padding-left: 0; }
.value:last-child { padding-right: 0; border-right: 0; }
.value__num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.value h3 { margin-bottom: .5rem; font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.value p { font-size: .92rem; color: var(--ink-3); }

/* One heading wraps to two lines, the next fits on one — without this
   every description starts at a different height. Each column spans
   three shared rows (number, heading, text), so across a row of the
   grid the headings take the height of the tallest and the texts all
   start on the same line. Where subgrid is unsupported the columns
   simply stack as before. */
@supports (grid-template-rows: subgrid) {
  .why__grid { grid-auto-rows: auto; }
  .value {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

/* ════════════════════════════════════════════════════════════
   08 · FAQ
   ════════════════════════════════════════════════════════════ */
.faq__inner {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq__aside { position: sticky; top: 130px; }
.faq__aside .statement { margin-bottom: 1.4rem; }
.faq__note { font-size: .92rem; color: var(--ink-3); }
.faq__list { border-top: 1px solid var(--rule); }

/* ════════════════════════════════════════════════════════════
   09 · CONTACT
   ════════════════════════════════════════════════════════════ */
.contact__cta {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.contact__big {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 7rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: var(--track-tight);
}
.contact__big span { display: block; }
.contact__aside { display: flex; flex-direction: column; gap: 1.2rem; }
.contact__btns { display: flex; flex-wrap: wrap; gap: .7rem; }

/* The enquiry itself lives in the dialog (css/enquiry.css), so the
   panel is just the direct contact details, set as one row. */
.contact__panel { display: block; }

.contact__info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.8rem clamp(3rem, 8vw, 6rem);
}
.ci { display: flex; flex-direction: column; gap: .2rem; }
.ci__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ci__v {
  font-size: .94rem;
  color: var(--ink-2);
  word-break: break-word;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { a.ci__v:hover { color: var(--accent-deep); } }
.ci__v--plain { color: var(--ink-3); font-size: .86rem; }

/* Mail, call and WhatsApp as one row of round icon buttons — 48px, over
   the 44px touch minimum. Each carries its full address or number as
   hidden text and as a tooltip. */
.ci__icons { display: flex; gap: .7rem; margin-top: .6rem; }
.contact__info a.ci__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .contact__info a.ci__icon:hover {
    color: var(--on-fill-strong);
    background: var(--fill-strong);
    border-color: var(--fill-strong);
  }
}
.contact__info a.ci__icon:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }