/* Sigma Lifts — coming-soon page and company details
   Brand: Sigma Violet #4B2F7A, Sigma Lavender #8D7FAD, Sigma Graphite #332F40, IBM Plex Sans. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-300.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff") format("woff"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-500.woff") format("woff"); }

:root {
  --violet: #4b2f7a;
  --violet-dark: #3a2361;
  --lavender-80: #a499bd;
  --violet-20: #dbd5e4;
  --ink: #332f40;
  --muted: #5d576b;
  --line: #e6e2ec;
  --bar: 10px;
  --gutter: clamp(28px, 7vw, 96px);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, p, ul { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }

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

/* Letterhead bars */

.bar {
  position: fixed;
  top: 0; bottom: 0;
  width: var(--bar);
  background: var(--lavender-80);
  pointer-events: none;
}
.bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 20vh;
  background: var(--violet);
}
.bar--left { left: 0; }
.bar--left::after { top: 7vh; }
.bar--right { right: 0; }
.bar--right::after { bottom: 7vh; }

@media (max-width: 599px) {
  :root { --bar: 6px; }
  .bar--right { display: none; }
}

/* Layout */

.page {
  flex: 1;
  width: 100%;
  max-width: calc(860px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Home */

/* The visible block (wordmark top to button bottom) sits in the middle of the screen:
   the footer is taken out of the flow and the padding is equal top and bottom. */
.home { position: relative; }
.home .footer { position: absolute; left: 0; right: 0; bottom: 0; }

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 80px;
  text-align: center;
}

/* --logo is the artboard width; the wordmark itself is 83.67% of it (453.5 of 542 units).
   The file carries its own clear space (44.4 of 542 units on every side). Nothing sits above
   the logo, so the top clear space is pulled out of the layout to keep the block centred;
   the bottom one stays, so the title sits directly under the artboard. */
.intro { --logo: clamp(280px, 80vw, 680px); }
.intro__logo { margin-top: calc(var(--logo) * -0.0819); }
.intro__logo img { width: var(--logo); }

/* The title alone sets the width of this column: the other children have
   contain: inline-size, so they take the title's width instead of pushing it wider. */
.intro__stack {
  display: grid;
  justify-items: stretch;
  width: fit-content;
  max-width: 100%;
}
.intro__stack > :not(.intro__title) { contain: inline-size; }

.intro__title {
  color: var(--violet);
  font-size: clamp(1.875rem, 4.2vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Allowed to run a little wider than the title so it stays on one line on phones. */
.intro__text {
  margin: 10px -48px 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
}

/* Grid keeps the Τ/Ε/Δ lines left-aligned to each other while the block sits centred.
   Same space above it as below it (to the button), so it reads as its own group. */
.contact {
  display: grid;
  justify-content: center;
  gap: 4px;
  text-align: left;
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  color: var(--violet);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.contact li {
  display: grid;
  grid-template-columns: 1.75em auto;
}
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact__key {
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}

@media (max-width: 599px) {
  .contact { font-size: 0.875rem; letter-spacing: 0; }
}

.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  /* +8px makes up for the text leading above the contact block, so the visible gaps match. */
  margin-top: calc(clamp(32px, 4vw, 44px) + 8px);
  padding: 8px 18px;
  border: 1px solid var(--lavender-80);
  border-radius: 2px;
  color: var(--violet);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn-outline::after { content: "→"; }
.btn-outline:hover { background: var(--violet); border-color: var(--violet); color: #fff; }

/* Company details page */

.details { padding-block: clamp(32px, 5vw, 56px) clamp(48px, 7vw, 80px); }

/* Same logo size as the home page. The artboard's clear space is pulled left so the
   wordmark lines up with the table; below it, that clear space already separates the title. */
.details { --logo: clamp(280px, 80vw, 680px); }
.details__logo { display: block; width: fit-content; margin-left: calc(var(--logo) * -0.0819); }
.details__logo img { width: var(--logo); }

.details__title {
  margin-top: clamp(4px, 1.2vw, 12px);
  margin-bottom: clamp(24px, 3vw, 32px);
  color: var(--violet);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.details__table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--violet);
  font-variant-numeric: tabular-nums;
}
.details__table th,
.details__table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
/* Labels and values share one size; colour and weight tell them apart. */
.details__table th,
.details__table td { font-size: 1rem; line-height: 1.5; }
.details__table th {
  width: 40%;
  padding-right: 24px;
  color: var(--muted);
  font-weight: 500;
}
/* Same treatment as the contact lines on the home page: violet, no underline until hover. */
.details__table a { color: var(--violet); font-weight: 500; text-decoration: none; }
.details__table a:hover { text-decoration: underline; }

/* Phones: everything centred, label above value. */
@media (max-width: 599px) {
  .details { text-align: center; }
  .details__logo { margin-inline: auto; }
  .details__table th,
  .details__table td { display: block; width: auto; text-align: center; }
  .details__table th { padding: 14px 0 2px; border-bottom: 0; }
  .details__table td { padding: 0 0 14px; }
}

.details__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  color: var(--violet);
  font-weight: 500;
  text-decoration: none;
}
.details__back::before { content: "←"; }
.details__back:hover { text-decoration: underline; }

.footer {
  padding: 20px var(--gutter) 28px;
  color: var(--muted);
  font-size: 0.8125rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}