/* Mercavant landing page v3 (Concept C, "The trajectory"). Values follow the Mercavant design system v0.2.
   One fixed theme: the page is navy for every visitor and does not follow the light/dark setting. */

@font-face { font-family: "Mercavant Serif"; src: url("/assets/fonts/serif-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/sans-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/sans-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --navy: #0C1E30;          /* brand-navy: the page */
  --ivory: #FAF8F3;         /* brand-ivory: headings, active text            15.9:1 on navy */
  --gold: #B08D57;          /* brand-gold: the mark, the trajectory, the end dot (never text) */
  --gold-light: #D9BA8A;    /* light gold: step labels, focus ring            9.1:1 */
  --text: #A8ACB4;          /* dark-surface body text                         7.4:1 */
  --text-dim: #8F97A3;      /* body text when another step is selected        5.7:1 */
  --text-small: #9AA2AD;    /* strip and footer                               6.5:1 */
  --line: #3A4C60;          /* the trajectory at rest (decorative) */
  --divider: #1D3550;       /* hairlines between sections (decorative) */

  --serif: "Mercavant Serif", "Lora", Georgia, serif;   /* Lora, self-hosted */
  --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ivory); }
a:hover { color: var(--gold-light); }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(24px, 4vw); padding-right: max(24px, 4vw); }

/* Trust strip */
.strip { border-bottom: 1px solid var(--divider); }
.strip p { margin: 0; padding-top: 12px; padding-bottom: 12px; font-size: 12px; letter-spacing: .06em; color: var(--text-small); text-align: center; }

/* Hero */
.hero { padding-top: 72px; padding-bottom: 24px; }
.hero__logo { width: clamp(300px, 38vw, 540px); margin: 0 auto; }

/* The method: three stops on the rising trajectory. Each stop's text hangs below and to the right of its
   point, where a rising line cannot reach it. Node positions are in the SVG's 1200 x 440 units. */
.method { position: relative; aspect-ratio: 1200 / 440; margin-top: 64px; }
.method__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.method__path { fill: none; stroke: var(--line); stroke-width: 1.2; }
.method__prog {
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .7s cubic-bezier(.22, .61, .36, 1);
}
/* fraction of the path's length up to each stop: 0.1051, 0.5236, 1 */
.method__prog.to-0 { stroke-dashoffset: .8949; }
.method__prog.to-1 { stroke-dashoffset: .4764; }
.method__prog.to-2 { stroke-dashoffset: 0; }
.method__node { fill: var(--navy); stroke: var(--gold-light); stroke-width: 1.5; transition: fill .25s ease; }
.method__node.is-on { fill: var(--gold-light); }
.method__end { fill: var(--gold); stroke: var(--gold); stroke-opacity: 0; stroke-width: 0; transition: stroke-width .4s ease; }
.method__end.is-on { stroke-opacity: .35; stroke-width: 10; }

.stop { position: absolute; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.stop--1 { left: 8.67%;  top: calc(68.18% + 12px); width: 29%; }
.stop--2 { left: 41.33%; top: calc(45.45% + 12px); width: 30%; }
.stop--3 { left: 77.33%; top: calc(9.09% + 14px);  width: 25%; }
.stop__word {
  font: 500 13px/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-light);
  background: transparent; border: 0;
  padding: 16px 8px 15px; min-height: 44px;    /* 44px tap area */
  margin-left: -9px;
  cursor: pointer;
}
.stop__word:hover, .stop__word[aria-pressed="true"] { color: var(--ivory); }
.stop__word:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 0; border-radius: 3px; }
.stop__line { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); transition: color .25s ease; text-wrap: pretty; }
.stop__line.is-on { color: var(--ivory); }
.stop__line.is-dim { color: var(--text-dim); }

/* Intro, once on load: the trajectory draws itself, then the three stops appear in turn. It only runs when
   site.js has marked the page with .js, so without JavaScript the finished page shows straight away. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.method__path { stroke-dasharray: 1 1; }
.js .method__path { animation: draw 2.4s .3s cubic-bezier(.22, .61, .36, 1) both; }
.js .method__n1, .js .stop--1 { animation: fade-in .7s .7s ease-out both; }
.js .method__n2, .js .stop--2 { animation: fade-in .7s 1.4s ease-out both; }
.js .method__n3, .js .stop--3 { animation: fade-in .7s 2.3s ease-out both; }

/* Statement and invitation */
.statement {
  position: relative;
  margin-top: 56px; padding-top: 88px; padding-bottom: 104px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start;
}
.statement::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--divider); transform-origin: left center; }
.statement__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -.005em; text-wrap: balance; }
.statement__side { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.statement__body { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.statement__contact { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--text); }
.email {
  align-self: flex-start;
  font-family: var(--serif); font-size: 22px; color: var(--ivory);
  text-decoration: none; padding-bottom: .28em;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 100% 1px no-repeat;
}
.email:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

/* Lower-section reveal. site.js adds .rv only to a section that is below the first screen and only when
   motion is allowed, then .is-in as it scrolls into view. Without JavaScript or with reduced motion
   none of this applies and the section is simply there.
   Sequence: the rule draws left to right, the headline rises line by line, the side text follows,
   then the email's gold underline draws in. */
.rv::before { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.rv .statement__title { opacity: 0; }
.rv .statement__title.is-split { opacity: 1; }
.rv-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rv-line__in { display: block; transform: translateY(110%); transition: transform 1.05s var(--ease-out); }
.rv .statement__side > * { opacity: 0; transform: translateY(16px); transition: opacity .9s ease-out, transform 1s var(--ease-out); }
.rv .email { background-size: 0 1px; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) 1.5s; }
.rv.is-in::before, .rv.is-in .rv-line__in, .rv.is-in .statement__side > * { transform: none; opacity: 1; }
.rv.is-in .statement__side > :nth-child(1) { transition-delay: .45s; }
.rv.is-in .statement__side > :nth-child(2) { transition-delay: .65s; }
.rv.is-in .email { background-size: 100% 1px; }

/* Footer: the company details, on every page */
.footer {
  border-top: 1px solid var(--divider);
  padding-top: 48px; padding-bottom: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; font-size: 13px; line-height: 1.7; color: var(--text-small);
}
.footer p { margin: 0; max-width: 62rem; }
.footer__mark { width: 56px; margin-bottom: 12px; }
.footer__reg { font-size: 12px; }

/* Below 900px: the curve becomes a vertical timeline ending in the gold dot */
@media (max-width: 900px) {
  .method { aspect-ratio: auto; display: flex; flex-direction: column; margin: 48px auto 0; max-width: 32rem; }
  .method__arc { display: none; }
  .stop { position: relative; left: auto; top: auto; width: auto; border-left: 1px solid var(--line); margin-left: 5px; padding-left: 28px; padding-bottom: 28px; }
  .stop::before { content: ""; position: absolute; left: -6px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); border: 1.5px solid var(--gold-light); transition: background .25s ease; }
  .stop.is-past { border-left-color: var(--gold); }
  .stop.is-past::after, .stop.is-on::after { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 20px; background: var(--gold); }
  .stop.is-past::before, .stop.is-on::before { background: var(--gold-light); }
  .stop--3 { border-left-color: transparent !important; padding-bottom: 0; }
  .stop--3::before { background: var(--gold); border-color: var(--gold); width: 12px; height: 12px; left: -7.5px; top: 15px; }
  .statement { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 64px; padding-top: 64px; padding-bottom: 80px; }
  .email { font-size: 19px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 56px; }
  .strip p { font-size: 11px; letter-spacing: .04em; }
}

/* Reduced motion: no animation at all, everything visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .rv *, .rv::before { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}

/* 404 page */
.notfound { padding-top: 96px; padding-bottom: 112px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.notfound .hero__logo { width: clamp(240px, 30vw, 380px); }
.notfound h1 { margin: 24px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); }
.notfound .email { align-self: center; }