/* COSEVA INTERNATIONAL — core stylesheet */

:root {
  --bg:            #0a0f1a;
  --bg-alt:        #0d1422;
  --bg-deep:       #070b13;
  --gold:          #c8a96a;
  --gold-bright:   #d9bd7f;
  --gold-dim:      #8a7440;
  --card-core:     #241f12;
  --card-client:   #6b5a2f;
  --card-client-2: #5c4d28;
  --text:          #e9ebef;
  --text-muted:    #a8b0bd;
  --text-dim:      #7e8794;
  --rule:          rgba(200, 169, 106, .22);
  --rule-soft:     rgba(255, 255, 255, .08);

  --maxw:          1131px;   /* 1035px inner at 1440, matching the reference */
  --gut:           clamp(1.25rem, 4vw, 3rem);
  --sec-y:         clamp(3.5rem, 8vw, 6.5rem);
  --radius:        6px;

  --f: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Section titles only. Everything else — body, buttons, labels, cards,
     sub-titles — stays on --f. */
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f);
  font-size: 1.125rem;   /* 18px */
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: #12100a;
  padding: .75rem 1.25rem; font-weight: 500; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- layout ---------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

section { padding-block: var(--sec-y); }
.band     { background: var(--bg-alt); }
.band-deep{ background: var(--bg-deep); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }

.sec-title {
  font-family: var(--f-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.625rem);   /* 42px — the serif sets larger */
  line-height: 1.22;
  letter-spacing: normal;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.sec-title.gold { color: var(--gold); }

.lede { color: var(--text-muted); }
.lede p { margin: 0 0 1.15em; }
.lede p:last-child { margin-bottom: 0; }

/* ---------- hero ---------- */

.hero {
  padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 8vw, 5rem);
  text-align: center;
}
.hero__logo { width: min(968px, 94%); margin: 0 auto clamp(2rem, 5vw, 3rem); }
.hero__cta  { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--gold { background: var(--gold); color: #14110a; border: 1px solid var(--gold); }
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--rule); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- split (text + image) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--rev .split__media { order: -1; }
.split__media img { border-radius: var(--radius); width: 100%; }
/* Landscape source in a portrait-ish column: crop rather than let the panel
   sit thin against a much taller text column. */
.split__media--crop img { aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
}

/* ---------- card grids (always equal height) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.875rem, 1.5vw, 1.125rem);   /* 18px */
  align-items: stretch;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid, .grid--2 { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 1.6vw, 1.125rem);   /* 18px */
  border-radius: var(--radius);
  height: 100%;
}
.card h3 { font-size: 1.40625rem; line-height: 1.25; margin-bottom: .6rem; }
.card p  { margin: 0; color: var(--text-muted); }

.card--core   { background: var(--card-core); border: 1px solid rgba(200,169,106,.18); }
.card--core h3 { color: var(--gold); }

.card--svc    { background: transparent; border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 0; }
.card--svc h3 { color: var(--gold); }

.card--reach  { background: transparent; border: 1px solid var(--rule); }
.card--reach h3 { color: var(--gold); }

.card--client { background: var(--card-client); border: 1px solid rgba(255,255,255,.07); }
.card--client h3 { color: #fff; }
.card--client p  { color: rgba(255,255,255,.86); }

.card__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card__icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; }

/* ---------- numbered process ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 700px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step__num {
  font-size: 1.125rem; font-weight: 300; color: var(--text); letter-spacing: .08em;
  padding-bottom: .5rem; border-bottom: 1px solid var(--gold-dim);
  display: block;
}
.step h3 { color: var(--gold); font-size: 1.40625rem; line-height: 1.25; margin: .9rem 0 .4rem; }
.step p  { margin: 0; color: var(--text-muted); }

/* ---------- presence ---------- */

.presence { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
@media (max-width: 760px) { .presence { grid-template-columns: minmax(0,1fr); } }
.presence figure { margin: 0; }
.presence img { border-radius: var(--radius); width: 100%; aspect-ratio: 1.618/1; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.presence h3 { color: var(--gold); font-size: 1.40625rem; line-height: 1.25; margin: 1.1rem 0 .5rem; }
.presence p  { margin: 0; color: var(--text-muted); }

.sub-title { font-size: clamp(1.25rem,2.4vw,1.6875rem); line-height: 1.25; letter-spacing: normal; margin: clamp(2.5rem,5vw,3.5rem) 0 clamp(1.25rem,2.5vw,1.75rem); }

/* ---------- feature list (Why COSEVA) ---------- */

.why { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 880px) { .why { grid-template-columns: 1fr; } .why__media { display: none; } }

.feat { display: flex; gap: 1rem; margin-bottom: clamp(1.5rem,3vw,2rem); }
.feat:last-child { margin-bottom: 0; }
.feat__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 3px; background: var(--card-client-2); margin-top: .3rem; }
.feat h3 { font-size: 1.40625rem; line-height: 1.25; margin-bottom: .4rem; }
.feat p  { margin: 0; color: var(--text-muted); }

/* ---------- measured single column ----------
   What You Can Expect and Start a Conversation both lost their right-hand
   panel, so their text runs on its own. Cap the measure rather than let it
   span the full 1035px inner width. */

.measure { max-width: 60ch; }

/* ---------- notes / callout ---------- */

.callout {
  margin-top: clamp(1.5rem,3vw,2rem);
  padding: clamp(1.1rem,2.2vw,1.5rem);
  background: rgba(107,90,47,.28);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.callout p { margin: 0; }

/* ---------- contact ---------- */

.contact__tag { font-size: clamp(1.25rem,2.4vw,1.6875rem); line-height: 1.25; letter-spacing: normal; margin-bottom: 1.1rem; }

.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(.875rem,1.5vw,1.125rem); margin-top: clamp(2rem,4vw,3rem); }
@media (max-width: 620px) { .contact-cards { grid-template-columns: minmax(0,1fr); } }

.ccard { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ccard__top { background: var(--card-client-2); padding: .85rem; display: flex; justify-content: center; }
.ccard__top svg { width: 22px; height: 22px; stroke: var(--gold-bright); fill: none; stroke-width: 1.5; }
.ccard__body { padding: clamp(1.1rem,2.2vw,1.5rem); }
.ccard h3 { font-size: 1.40625rem; line-height: 1.25; margin-bottom: .5rem; }
.ccard a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.ccard a:hover { color: var(--gold-bright); }
.ccard p { margin: .5rem 0 0; color: var(--text-muted); }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--rule-soft); padding-block: 2rem; background: var(--bg-deep); }
.foot__in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .8125rem; color: var(--text-dim); }
.foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover, .foot a[aria-current="true"] { color: var(--gold); }

/* ---------- landing + partner ----------
   index.html and partner/index.html are the production originals and are
   fully self-contained: they carry their own inline <style> and never load
   this file. The .stage / .langs / .langs-note / .stage__partner /
   .partner__* rules that used to live here styled nothing and have been
   removed. The .plogin block below stays per CLAUDE.md.
   ---------------------------------------------------------------------- */

/* ===== Member login block — reinstate when authentication exists =====
   Restore the form markup inside .stage, above .partner__mail.
   Styles are kept below so it drops in without redesign.
   Do not restore this until the endpoint actually authenticates.
   ==================================================================== */

.plogin { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; margin: clamp(2rem,5vw,3rem) auto 0; }
.plogin__in {
  background: rgba(255,255,255,.04); border: 1px solid var(--gold-dim);
  border-radius: 2px; padding: .9rem 1rem; color: #fff;
  font-family: var(--f); font-size: .875rem; letter-spacing: .12em;
}
.plogin__in::placeholder { color: rgba(255,255,255,.4); }
.plogin__go {
  background: rgba(0,0,0,.35); border: 1px solid var(--gold);
  border-radius: 2px; padding: .9rem 1rem; color: var(--gold);
  font-family: var(--f); font-size: .8125rem; letter-spacing: .2em; cursor: pointer;
}
.plogin__go:hover { background: var(--gold); color: #14110a; }

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


/* ---------- scroll reveal ----------
   Motion signature is taken from the production landing page, which fades its
   logo in with `pureFadeIn 2.5s ease-in-out forwards` — opacity only, no
   movement. The reveal keeps that easing and its unhurried character, adds the
   small upward translate that was asked for, and never scales, bounces or
   moves horizontally.

   Content is visible by default. Nothing here applies until the inline script
   in each language page adds .reveal-on to <html>, which it only does when
   IntersectionObserver exists and the visitor has not asked for reduced
   motion. If the script fails or never runs, the page renders in full.        */

.reveal-on .reveal {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.reveal-on .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s ease-in-out, transform 1.2s ease-in-out;
  will-change: auto;
}

/* Belt and braces: the script already opts out, but if .reveal-on is ever
   present under reduced motion, show everything with no animation at all. */
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal,
  .reveal-on .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

main > section:nth-child(7) .sec-title, main > section:nth-child(8) .sec-title, main > section:nth-child(9) .sec-title { color: var(--gold); }