/* BrainUP Studio landing page.
   Every size comes from the designer's two artboards (_src/*.ai):
     phone   = "v-mobile" artboard 3, 1179 pt wide = 393 CSS px at 3x (these are the base rules)
     desktop = "v-desktop", 1920 px wide (inside the min-width: 45em block)
   1rem = 16px at both reference widths. On phones the root size follows the screen width, so the
   page keeps the proportions of the artboard from about 344 to 428 px; below that it stops
   shrinking (body text never under 16 px) and the text simply wraps.

   TO SWITCH TO THE REAL TYPEFACE (Supria Sans Condensed, once its webfont licence is sorted):
   replace the five @font-face blocks, keep the weights, and change --font. Nothing else. */

@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/barlow-semi-condensed-400i.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-800.woff2) format('woff2'); }

:root {
  --font: 'Barlow Semi Condensed', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --bg: #524947;
  --green: #72be44;       /* layer "Action" */
  --green-click: #629b3e; /* layer "Click" */
  --text: #e0dcdc;
  --soft: #cbc1bf;
  --gutter: 1.5rem;
  color-scheme: dark;
}

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

html {
  font-size: clamp(87.5%, 4.0712vw, 109%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  padding: max(2.375rem, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(2.15rem, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--bg);
  color: var(--text);
  font: 400 1.1458rem/1.1636 var(--font);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

main, footer { display: block; max-width: 28rem; margin-inline: auto; }

img, svg { display: block; }
img { height: auto; max-width: 100%; }
h1, h2, p { margin: 0; font-weight: 400; text-wrap: balance; }
strong, b { font-weight: 600; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }
br.d { display: none; }

/* arrow: an inline shape, because the fallback font has no U+2192 */
.arr {
  display: inline-block;
  width: .72em;
  height: .52em;
  vertical-align: .1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.lead .arr { stroke-width: 1.9; }

/* --- logo ---------------------------------------------------------------- */
.brand img { width: 10.05rem; margin-inline: auto; }

/* --- intro --------------------------------------------------------------- */
h1 {
  margin-top: 2.18rem;
  color: var(--green);
  font-size: 1.979rem;
  line-height: .979;
  font-weight: 600;
}
.lead { margin-top: .47rem; font-size: 1.354rem; line-height: 1.092; }

/* --- the shallow chevron between sections -------------------------------- */
hr {
  width: 3.125rem;
  height: .375rem;
  margin: 1.89rem auto 1.4rem;
  border: 0;
  background: url(../img/divider.svg) center / 100% 100% no-repeat;
}

/* --- text sections ------------------------------------------------------- */
h2 { color: var(--soft); font-size: 1.458rem; line-height: 1.2; font-weight: 600; }
h2 + p { margin-top: .31rem; }
.note { margin-top: .68rem; font-size: .9375rem; line-height: 1.2; }

/* --- client logos: three to a row here, six on desktop, each row justified.
   .row and .half let the same markup do both, see the desktop block. ------ */
.clients h2 { padding-top: .55rem; color: var(--text); font-size: 1.1458rem; } /* padding: a margin would collapse into the hr's */
.logos { display: flex; flex-direction: column; gap: 1.05rem; margin-top: 1.44rem; padding-inline: .6rem; }
.row { display: contents; }
.half { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.logos img { flex: 0 1 auto; min-width: 0; }
.l-reload { order: -1; } /* the phone artboard has it left of Natural */

.l-bt { width: 2.86rem; }
.l-ing { width: 6.41rem; }
.l-bmw { width: 3.44rem; }
.l-faurecia { width: 5.41rem; }
.l-dacia { width: 4.12rem; }
.l-stabilo { width: 5.34rem; }
.l-holcim { width: 6.38rem; }
.l-elfi { width: 3.65rem; }
.l-arctic { width: 4.82rem; }
.l-frez { width: 3.3rem; }
.l-martur { width: 8.03rem; }
.l-vola { width: 3.93rem; }
.l-factureaza { width: 6.23rem; }
.l-mini { width: 4.55rem; }
.l-iqads { width: 4.33rem; }
.l-natural { width: 5.34rem; }
.l-reload { width: 3.76rem; }
.l-arhilab { width: 4.05rem; }

/* --- the question and the button ------------------------------------------ */
.challenge { margin-top: 3.125rem; }
.challenge h2 { color: var(--green); line-height: 1.1; }
.skip { margin-top: .34rem; font-size: 1.458rem; line-height: 1.2; }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .34em;
  width: 12.73rem;
  min-height: 2.75rem;
  margin-top: 1.875rem;
  padding: .3rem 1rem;
  border-radius: 1.375rem .125rem 1.375rem .125rem;
  background: var(--green);
  color: var(--bg);
  font-size: 1.354rem;
  line-height: 1.1;
  font-weight: 800;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cta .arr { stroke-width: 2.1; transition: transform .15s ease; }
.cta:hover, .cta:active { background: var(--green-click); }
.cta:focus-visible { outline-offset: 4px; border-radius: 1.375rem .125rem 1.375rem .125rem; }
@media (hover: hover) { .cta:hover .arr { transform: translateX(.14em); } }

/* --- contact ------------------------------------------------------------- */
footer { margin-top: 2.72rem; color: var(--soft); font-size: 1.042rem; line-height: 1.2; }
address { font-style: normal; }

.lines {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  column-gap: .6rem;
  font-weight: 600;
  text-align: left;
}
/* rows of 20 px as drawn are too small for a thumb, so the links get height, not the text */
.lines a { display: block; padding-block: .32rem; }
.lines a:hover, .place:hover span { color: var(--text); }
.lines .arr { position: relative; top: .1em; color: var(--green); stroke-width: 1.9; } /* a grid cell centres on the line box, which sits above the digits */

.place {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  padding-block: .3rem;
  font-weight: 500;
  text-align: left;
}
.pin { flex: none; width: .84rem; height: 1.1rem; fill: none; stroke: var(--green); stroke-width: 1.6; }

/* Very narrow screens (old small phones, folded foldables): let each phone number drop under
   its address instead of squeezing the row. */
@media (max-width: 19.5em) {
  .lines { display: block; text-align: center; }
  .lines a { display: inline-block; padding-block: .3rem; }
  .lines .arr { margin-inline: .25rem; }
  .lines a:nth-of-type(odd) { display: block; }
  .lines .arr { display: none; }
}

/* ===== desktop artboard, 1920 px ========================================= */
@media (min-width: 45em) {
  html { font-size: 100%; }

  body {
    padding-top: 2.6rem;
    padding-bottom: 2.68rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }
  main, footer { max-width: 44rem; }
  br.d { display: inline; }
  br.m { display: none; }

  .brand img { width: 11.31rem; }

  h1 { margin-top: 1.74rem; font-size: 2.5rem; line-height: 1.2; }
  .lead { margin-top: .29rem; font-size: 1.5625rem; line-height: 1.2; }

  hr { margin: 1.6rem auto 1.72rem; }

  h2 { font-size: 1.5625rem; }
  h2 + p { margin-top: .375rem; }
  .note { margin-top: .67rem; margin-bottom: -.375rem; font-size: 1.125rem; }

  .clients h2 { padding-top: 0; font-size: 1.5625rem; }
  .logos { width: 41.39rem; margin: 1.03rem auto 0; padding-inline: 0; gap: 1.45rem; }
  .row { display: flex; align-items: center; justify-content: space-between; }
  .half { display: contents; }
  .l-reload { order: 0; }

  .challenge { margin-top: 2.04rem; }
  .challenge h2 { line-height: 1.048; }
  .skip { margin-top: .44rem; font-size: 1.5625rem; }

  .cta {
    width: 12.375rem;
    min-height: 2.625rem;
    margin-top: 1.91rem;
    border-radius: 1.3125rem .125rem 1.3125rem .125rem;
    font-size: 1.3125rem;
  }
  .cta:focus-visible { border-radius: 1.3125rem .125rem 1.3125rem .125rem; }

  footer { margin-top: 3.38rem; font-size: 1rem; }
  address { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
  .lines a { padding-block: 0; }
  .place { margin-top: 0; padding-block: 0; }
  .pin { width: .875rem; height: 1.125rem; }
}

/* tablets use the desktop layout but still have thumbs */
@media (min-width: 45em) and (pointer: coarse) {
  .lines a { padding-block: .36rem; }
  .place { padding-block: .36rem; }
}

/* the artboard is 1920 wide; beyond that the column grows with the screen instead of shrinking
   into the middle of a large monitor */
@media (min-width: 120em) {
  html { font-size: min(150%, calc(100% + (100vw - 1920px) * .004167)); }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta .arr { transition: none; }
  .cta:hover .arr { transform: none; }
}

@media print {
  html, body { background: #fff; color: #222; }
  h1, .challenge h2 { color: #3f7d1f; }
  h2, footer { color: #222; }
  .logos { display: none; }
  .clients h2 { display: none; }
}

/* --- 404 ----------------------------------------------------------------- */
.back { text-decoration: underline; text-underline-offset: .15em; }