/* ══════════════════════════════════════════════════════════
   CLIMB INC
   Pinned nav + pinned gradient panel; the left column scrolls.
   ══════════════════════════════════════════════════════════ */

/* ─────────  fonts  ───────── */
@font-face {
  font-family: 'Saans';
  src: url('assets/fonts/Saans-TRIAL-VF.ttf') format('truetype-variations'),
       url('assets/fonts/Saans-TRIAL-VF.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garda Nova';
  src: url('assets/fonts/GardaNova2Trial-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garda Nova';
  src: url('assets/fonts/GardaNova2Trial-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Garda Nova';
  src: url('assets/fonts/GardaNova2Trial-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─────────  tokens  ─────────
   --u is one proportional unit. It answers to viewport height as
   well as width so the whole composition fits one screen without
   scrolling. At 1440x900 one unit is 9px, the scale the px
   comments below are quoted against (e.g. 6u === 54px).          */
:root {
  --u: clamp(6px, min(0.625vw, 1.02vh), 10px);
  --gut: clamp(20px, 2.6vw, 78px);

  --nav-h:     calc(var(--u) * 9.5);
  --pad-b:     calc(var(--u) * 3);
  --panel-top: calc(var(--nav-h) + var(--u) * 1.5);
  /* stops on the same bottom margin as the footer */
  --panel-h:   calc(100dvh - var(--panel-top) - var(--pad-b));
  /* aspect-true, but never allowed to eat the page on tall screens */
  --panel-w:   min(calc(var(--panel-h) * 421 / 1077), 24vw);
  --panel-gap: calc(var(--u) * 10);

  --ink:   #0B0B0B;
  --muted: #8C8C8E;
  --brand: #495AEE;

  --grad: linear-gradient(180deg,
            #050113   0%,
            #0B0227   9%,
            #1F027F  28%,
            #495AEE  49%,
            #92AAEC  72%,
            #DCE2F4  90%,
            #EDF0F8 100%);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  font-family: 'Saans', 'Helvetica Neue', Arial, sans-serif;
  font-variation-settings: 'wght' 400;
  color: var(--ink);
  letter-spacing: -0.02em;          /* −2% tracking on all type */
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
svg, img { display: block; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* forced breaks, each scoped to where it is actually wanted */
.mob-lb { display: none; }            /* phones only, see below */

/* ─────────  nav — pinned  ───────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
  padding: 0 var(--gut);
  background: #fff;
}

/* softens the line where the column scrolls under the bar */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: calc(var(--u) * 2);
  background: linear-gradient(#fff, rgba(255,255,255,0));
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: calc(var(--u) * 1.15); }

.brand__mark {
  height: calc(var(--u) * 2.67);             /* 24px, square */
  width:  calc(var(--u) * 2.67);
  flex: none;
  /* fine engraving — a touch of contrast keeps the linework defined
     once it is resampled down to nav size */
  filter: contrast(1.18);
}

.brand__name {
  font-family: 'Garda Nova', 'Saans', serif; /* Garda Nova Regular */
  font-weight: 400;
  font-size: calc(var(--u) * 2.67);          /* 24px */
  line-height: 1;
  letter-spacing: -0.02em;
}

.locale { text-align: right; line-height: 1.06; }

/* Saans Medium, −2% */
.locale__city {
  display: block;
  font-variation-settings: 'wght' 500;
  font-size: calc(var(--u) * 1.78);          /* 16px */
  letter-spacing: -0.02em;
  white-space: nowrap;                       /* "LAGOS, NIGERIA" */
}

.locale__time {
  display: block;
  margin-top: calc(var(--u) * 0.36);
  color: var(--ink);
  opacity: .5;                               /* 50% */
  font-variation-settings: 'wght' 500;
  font-size: calc(var(--u) * 1.67);          /* 15px */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─────────  gradient panel — pinned  ───────── */
.panel {
  position: fixed;
  z-index: 5;
  top:   var(--panel-top);
  right: var(--gut);
  width:  var(--panel-w);
  height: var(--panel-h);
  background: var(--grad);
  overflow: hidden;
  border-radius: 1px;
}

.panel canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* micro-grain so the gradient never bands */
.panel__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ─────────  the column  ─────────
   Fixed to the viewport and laid out as a flex column, so the paper
   absorbs the leftover height and the footer sits on the bottom
   margin instead of leaving a gap under it.                       */
.page {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--panel-top) + var(--u) * 2.5)
    calc(var(--gut) + var(--panel-w) + var(--panel-gap))
    var(--pad-b)
    var(--gut);
}

/* ─────────  headline  ───────── */
.headline {
  font-variation-settings: 'wght' 700;       /* Saans Bold */
  font-size: calc(var(--u) * 6);             /* 54px */
  line-height: 1.13;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
  margin-bottom: calc(var(--u) * 2.2);
}

/* ─────────  paper card  ─────────
   Indented from the headline's left edge, as in the reference —
   the paper sits inboard of the type.                            */
.card {
  position: relative;
  margin-left: 4.2vw;
  width: min(100% - 4.2vw, 47vw);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 5) calc(var(--u) * 4.5) calc(var(--u) * 5.5);
  border-radius: 2px;
  color: var(--ink);
  /* the supplied sheet, held just off pure white */
  background-color: #FAF8F2;
  background-image: url('assets/paper-texture.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  isolation: isolate;
}

.card > * { position: relative; z-index: 2; }

/* paper clip */
.clip {
  position: absolute;
  z-index: 3;
  top:   calc(var(--u) * -8.4);
  right: calc(var(--u) * 3);
  height: calc(var(--u) * 11.2);
  width: auto;
  filter: drop-shadow(1px 3px 3px rgba(30,30,32,.26));
}

/* ─────────  stats  ───────── */
.card__stats {
  display: grid;
  /* minmax(0,·): a nowrap figure must not widen its own column */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 2);
}

.stat__icon {
  height: calc(var(--u) * 6.22);             /* 56px */
  width: auto;
  margin-bottom: calc(var(--u) * 2.8);
}

.stat__value {
  font-variation-settings: 'wght' 600;
  font-size: calc(var(--u) * 5.33);          /* 48px */
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
}

.stat__label {
  margin-top: calc(var(--u) * 1);
  color: var(--muted);
  font-variation-settings: 'wght' 400;
  font-size: calc(var(--u) * 1.78);          /* 16px */
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ─────────  services  ───────── */
.eyebrow {
  font-family: 'Garda Nova', 'Saans', serif; /* Garda Nova Regular */
  font-weight: 400;
  font-size: calc(var(--u) * 1.67);          /* 15px */
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: calc(var(--u) * 3);
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1.4);
}

.service__icon {
  width:  auto;
  height: calc(var(--u) * 4);                /* 36px */
  margin-bottom: calc(var(--u) * 1.7);
}

.service span {
  display: block;
  font-variation-settings: 'wght' 500;
  font-size: calc(var(--u) * 2.44);          /* 22px */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ─────────  footer: contact + social  ───────── */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  /* left edge on the headline, right edge on the paper — so the
     contact lines up with the type and the socials with the clip */
  width: min(100%, calc(4.2vw + 47vw));
  flex: 0 0 auto;
  margin-top: calc(var(--u) * 3.2);
}

/* the social row drops on the same vertical as the paper clip */
.footer .social { margin-right: calc(var(--u) * 2.2); }

.footer__contact {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  white-space: nowrap;
}

.contact__label {
  color: var(--muted);
  font-variation-settings: 'wght' 400;
  font-size: calc(var(--u) * 2.1);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.contact__mail {
  display: inline-block;
  font-variation-settings: 'wght' 600;
  font-size: calc(var(--u) * 2.1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .45s cubic-bezier(.22,1,.36,1);
}
.contact__mail:hover,
.contact__mail:focus-visible { background-size: 100% 1px; }

.social { display: flex; align-items: center; gap: calc(var(--u) * 0.7); }

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 0.7);             /* real hit area */
  color: var(--ink);
  opacity: .9;
  border-radius: 4px;
  transition: opacity .25s ease, color .25s ease;
}
.social__link:hover,
.social__link:focus-visible { opacity: 1; color: var(--brand); }
.social__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.social__link svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); }

/* ═════════  responsive  ═════════ */

@media (max-width: 1100px) {
  .headline { font-size: calc(var(--u) * 5.4); }
  :root { --panel-gap: calc(var(--u) * 6); }
}

/* phones and portrait tablets: the panel unpins and rides on top */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  :root {
    --u: clamp(6.5px, 2.3vw, 10px);
    --nav-h: calc(var(--u) * 8);
  }

  body { display: flex; flex-direction: column; }

  /* one line rather than a stacked, indented block */
  .locale {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: calc(var(--u) * 1.1);
    min-width: 0;
  }
  .locale__city {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;                 /* safety for long places */
    font-size: calc(var(--u) * 1.5);
  }
  .locale__time {
    display: inline;
    flex: none;
    margin-top: 0;
    font-size: calc(var(--u) * 1.5);         /* 13px */
  }

  .panel {
    /* stays a positioning context, or the absolute canvas inside
       escapes to the viewport and paints over the whole page */
    position: relative;
    top: auto; right: auto;      /* clear the pinned offsets */
    order: 1;
    width: auto;
    height: 40vh;
    margin: calc(var(--nav-h) + var(--u) * 2.5) var(--gut) 0;
  }

  .page {
    order: 2;
    height: auto;
    display: block;
    padding: calc(var(--u) * 4) var(--gut) calc(var(--u) * 5);
  }

  .lb { display: none; }
  /* enough room here — let the copy fill the line before wrapping */
  .svc-lb { display: none; }

  .headline { font-size: calc(var(--u) * 4.4); margin-bottom: calc(var(--u) * 3); }

  /* the shared left indent collapses to the gutter here */
  .card, .footer { margin-left: 0; width: 100%; }

  /* one row of nowrap items overflows a phone — stack it */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--u) * 1.8);
    margin-top: calc(var(--u) * 4);
  }
  .footer .social { margin-right: 0; }
  .footer__contact { white-space: normal; flex-wrap: wrap; }

  .card {
    margin-left: 0;
    width: 100%;
    gap: calc(var(--u) * 5);
    padding: calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 4.5);
  }

  .clip { right: calc(var(--u) * 2.4); }

  .card__stats  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                  gap: calc(var(--u) * 1.6); }
  /* sized so "6 Countries" clears half the sheet on one line */
  .stat__value  { font-size: calc(var(--u) * 2.9); }
  .stat__icon   { margin-bottom: calc(var(--u) * 2); }

  .services      { grid-template-columns: 1fr; gap: calc(var(--u) * 3.4); }
  .service       { display: flex; align-items: center; gap: calc(var(--u) * 2.2); }
  .service__icon { margin-bottom: 0; flex: none;
                   width: calc(var(--u) * 3.56); height: calc(var(--u) * 3.56); }
  .service span  { font-size: calc(var(--u) * 2.2); }

  .contact__label, .contact__mail { font-size: calc(var(--u) * 2.5); }
  .social { margin-left: calc(var(--u) * -0.7); }
}

/* narrow phones: the stat labels break so the two columns match */
@media (max-width: 560px) {
  .mob-lb { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}