/*
Theme Name: ResultPeak
Theme URI: https://resultpeak.com/
Author: Novamira
Description: Custom classic theme for resultpeak.com - performance marketing agency. Homepage built pixel-for-pixel from the ResultPeak design canvas.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: resultpeak
*/

/* --------------------------------------------------------------------------
   Tokens - taken verbatim from the design canvas
   -------------------------------------------------------------------------- */
:root {
  --rp-ink:         #0d0d0d;
  --rp-ink-soft:    #4a4a4a;
  --rp-accent:      #f0503c;
  --rp-accent-dark: #d94531;
  --rp-dark:        #131313;
  --rp-sheet:       #f4f4f4;
  --rp-panel:       #fbfbfb;
  --rp-panel-alt:   #ececec;
  --rp-grey:        #8d8d8d;
  --rp-grey-soft:   #9a9a9a;
  --rp-grey-faint:  #a5a5a5;
  --rp-rule:        #dcdcdc;
  --rp-rule-soft:   #e3e3e3;
  --rp-pad:         72px;   /* outer gutter */
  --rp-inset:       136px;  /* deep left inset used by the hero card / stats */
  --rp-sans:        'Manrope', Helvetica, Arial, sans-serif;
  --rp-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The canvas has no universal box-sizing reset and nothing in the layout
   depends on one, so we do not introduce it - only the elements we add
   ourselves (the mobile drawer) opt in. */
body {
  margin: 0;
  background: var(--rp-sheet);
  font-family: var(--rp-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--rp-ink); text-decoration: none; }
a:hover { color: #6b6b6b; }
img { display: block; }

/* Full-bleed: no centred sheet, no drop shadow around it. At a 1440px content
   width this still lays out exactly like the design canvas; wider viewports
   simply stretch, with the gutters staying where the canvas put them. */
.rp-page {
  width: 100%;
  background: var(--rp-sheet);
  color: var(--rp-ink);
  overflow-x: clip;
}

.rp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--rp-ink);
  padding: 12px 20px;
  z-index: 100;
  font-family: var(--rp-mono);
  font-size: 12px;
}
.rp-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.rp-hero {
  position: relative;
  height: 820px;
  overflow: hidden;
  background: #b9b9b9;
}
/* The canvas veil was tuned for a mid-dark photo. The client clip is a bright,
   high-key sky, which leaves the white nav at ~1.7:1 against it, so the media
   is graded down here and the veil below is deepened. Measured against the
   clip: nav and eyebrow now clear 4.5:1, the headline sits around 8:1. Re-check
   both if the clip is ever replaced. */
.rp-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: brightness(.78) contrast(1.05);
  --rp-par: 70px;
}
/* picture is inline by default, which would give the img nothing to size its
   height:100% against. */
.rp-hero__media picture { position: absolute; inset: 0; display: block; }
.rp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Video sits over the still and fades in when it can actually play, so a slow
   connection never shows a black or empty hero. */
.rp-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.rp-hero__video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rp-hero__video { display: none; }
}
.rp-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20,20,20,.46) 0%,
    rgba(20,20,20,.34) 12%,
    rgba(20,20,20,.20) 34%,
    rgba(20,20,20,.06) 52%,
    rgba(20,20,20,0)   68%);
  pointer-events: none;
}

/* Top bar */
.rp-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px var(--rp-pad);
  pointer-events: none;
}
.rp-bar__left,
.rp-bar__right { pointer-events: auto; display: flex; align-items: center; }
.rp-bar__left { gap: 64px; }
.rp-bar__right { gap: 34px; }

.rp-brand {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
}
a.rp-brand:hover { color: #fff; opacity: .8; }

.rp-nav {
  display: flex;
  gap: 38px;
  font-family: var(--rp-mono);
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.rp-nav a { color: inherit; }
.rp-nav a:hover { color: #fff; }

/* Language switcher. The one element the canvas has no slot for; it sits at
   the end of the left group so the phone and CTA keep their canvas positions. */
.rp-langs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rp-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.rp-langs__item { color: rgba(255, 255, 255, .5); }
.rp-langs__item:hover { color: #fff; }
.rp-langs__item.is-current { color: #fff; }
.rp-langs__sep { color: rgba(255, 255, 255, .28); }

.rp-drawer__langs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--rp-mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rp-drawer__langs .rp-langs__item { font-size: 13px; }

.rp-tel {
  font-family: var(--rp-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .86);
  white-space: nowrap;
}
.rp-tel:hover { color: #fff; }

.rp-cta {
  font-family: var(--rp-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rp-accent);
  padding: 14px 27px;
  white-space: nowrap;
  transition: background .18s ease;
}
.rp-cta:hover { background: var(--rp-accent-dark); color: #fff; }

/* Hero copy */
.rp-hero__copy {
  position: absolute;
  left: var(--rp-pad);
  top: 236px;
  max-width: 640px;
  pointer-events: none;
}
.rp-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.rp-eyebrow__dot {
  width: 7px;
  height: 7px;
  background: var(--rp-accent);
  display: block;
  flex: none;
}
.rp-eyebrow__text {
  font-family: var(--rp-mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.rp-hero__title {
  margin: 0;
  font-size: 62px;
  line-height: 1.06;
  font-weight: 200;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: pretty;
}

/* Overhanging dark card */
.rp-card {
  position: absolute;
  left: var(--rp-inset);
  bottom: -74px;
  width: 322px;
  background: var(--rp-dark);
  color: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .32);
}
.rp-card__body { padding: 34px 30px 26px; }
.rp-card__title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rp-card__sub {
  font-family: var(--rp-mono);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-top: 12px;
}
.rp-card__feet {
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 18px 30px;
  font-family: var(--rp-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.rp-card__sep { color: rgba(255, 255, 255, .28); }

/* Cyrillic runs long: "СТРАТЕГИЯ / ТРАФИК / АНАЛИТИКА" is 44px wider than the
   322px card allows at the canvas gap and tracking. Closing both up fits it on
   one line without shrinking the type. */
html[lang^="ru"] .rp-card__feet {
  gap: 12px;
  letter-spacing: .14em;
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.rp-stats {
  position: relative;
  background: var(--rp-panel);
  display: grid;
  grid-template-columns: 458px 1fr;
}
.rp-stats__aside {
  background: var(--rp-panel-alt);
  padding: 96px 30px 54px var(--rp-inset);
}
.rp-figs { display: flex; gap: 46px; }
.rp-fig__label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rp-fig__label--muted { color: var(--rp-grey); }
.rp-fig__note {
  font-family: var(--rp-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rp-grey);
  margin-top: 30px;
}
.rp-fig__value { font-size: 22px; font-weight: 300; margin-top: 8px; }
.rp-fig__value--accent { color: var(--rp-accent); }

.rp-stats__main {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  align-items: start;
  padding: 62px var(--rp-pad) 62px 64px;
  gap: 56px;
}
.rp-metric__num { font-size: 46px; font-weight: 200; letter-spacing: -.01em; }
.rp-metric__rule { height: 1px; background: var(--rp-rule); margin: 26px 0 20px; }
.rp-metric__cap {
  font-family: var(--rp-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--rp-ink-soft);
}
.rp-approach { border-left: 1px solid var(--rp-rule-soft); padding-left: 48px; }
.rp-approach__kicker {
  font-family: var(--rp-mono);
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rp-grey-soft);
  margin-bottom: 18px;
}
.rp-approach__text {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--rp-ink-soft);
  text-wrap: pretty;
  max-width: 420px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Ridges band + footer strip
   -------------------------------------------------------------------------- */
.rp-ridges {
  position: relative;
  height: 300px;
  background: var(--rp-panel);
  overflow: hidden;
}
.rp-ridges__media { position: absolute; inset: 0; --rp-par: 46px; }
.rp-ridges__media img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-footline {
  padding: 34px var(--rp-pad);
  background: var(--rp-sheet);
  display: flex;
  justify-content: center;
  font-family: var(--rp-mono);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rp-grey-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Parallax
   The media layer is grown by the travel distance at both ends and then shifted
   inside its clipping frame, so it never exposes an edge however far it moves.
   JS only ever writes the transform - all the sizing lives here, and these
   rules have to come after the media rules above to win on source order.
   -------------------------------------------------------------------------- */
.rp-parallax > picture,
.rp-parallax > img,
.rp-parallax > video {
  top: calc(-1 * var(--rp-par, 60px));
  bottom: auto;
  height: calc(100% + 2 * var(--rp-par, 60px));
}
.rp-parallax.is-live > picture,
.rp-parallax.is-live > img,
.rp-parallax.is-live > video { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rp-parallax { --rp-par: 0px; }
}

/* --------------------------------------------------------------------------
   Mobile drawer - not in the canvas, added so the nav survives small screens
   -------------------------------------------------------------------------- */
.rp-burger {
  display: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  cursor: pointer;
  position: relative;
  pointer-events: auto;
}
.rp-burger span,
.rp-burger::before,
.rp-burger::after {
  content: '';
  position: absolute;
  left: 12px;
  width: 18px;
  height: 1px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.rp-burger::before { top: 15px; }
.rp-burger span   { top: 21px; }
.rp-burger::after { top: 27px; }
.rp-burger.is-open::before { transform: translateY(6px) rotate(45deg); }
.rp-burger.is-open span    { opacity: 0; }
.rp-burger.is-open::after  { transform: translateY(-6px) rotate(-45deg); }

.rp-drawer {
  display: none;
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--rp-dark);
  padding: 96px 32px 40px;
  flex-direction: column;
  gap: 26px;
}
.rp-drawer.is-open { display: flex; }
.rp-drawer a {
  font-family: var(--rp-mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.rp-drawer a:hover { color: #fff; }
.rp-drawer__cta {
  align-self: flex-start;
  background: var(--rp-accent);
  color: #fff !important;
  padding: 15px 28px;
}
/* Sits exactly where the burger is, so the icon appears to swap in place. */
.rp-drawer__close {
  position: absolute;
  top: 24px;
  right: var(--rp-pad);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
body.rp-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Responsive. At >=1440px nothing below applies and the page renders exactly
   as the canvas does.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  :root { --rp-pad: 48px; --rp-inset: 72px; }
  .rp-hero__title { font-size: 54px; }
  .rp-stats { grid-template-columns: 380px 1fr; }
  .rp-stats__aside { padding: 80px 28px 48px var(--rp-inset); }
  .rp-stats__main { padding: 56px var(--rp-pad) 56px 48px; gap: 40px; }
  .rp-approach { padding-left: 36px; }
}

/* The bar runs out of room well before the burger takes over, so tighten its
   gaps first and drop the phone number second. */
@media (max-width: 1279px) {
  .rp-bar__left { gap: 36px; }
  .rp-nav { gap: 24px; }
  .rp-bar__right { gap: 22px; }
}

@media (max-width: 1100px) {
  :root { --rp-pad: 36px; --rp-inset: 48px; }
  .rp-tel { display: none; }
  .rp-hero { height: 720px; }
  .rp-hero__copy { top: 210px; max-width: 560px; }
  .rp-hero__title { font-size: 46px; }
  .rp-stats { grid-template-columns: 1fr; }
  .rp-stats__aside { padding: 56px var(--rp-pad) 44px var(--rp-inset); }
  .rp-stats__main {
    grid-template-columns: 1fr 1fr;
    padding: 48px var(--rp-pad);
    gap: 40px 48px;
  }
  .rp-approach { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rp-rule-soft); padding: 32px 0 0; }
  .rp-approach__text { max-width: 640px; }
  .rp-ridges { height: 240px; }
}

@media (max-width: 860px) {
  /* Nav, phone and the language switcher all move into the drawer. */
  .rp-nav, .rp-tel, .rp-langs { display: none; }
  .rp-burger { display: block; }
  .rp-bar { padding: 24px var(--rp-pad); }
  .rp-bar__left { gap: 0; }
  .rp-bar__right { gap: 16px; }
  /* Let the card overhang for real instead of being clipped by the hero -
     at this width there is no room to lose the bottom half of it. */
  .rp-hero { height: 620px; overflow: visible; }
  .rp-hero__media { overflow: hidden; }
  .rp-hero__copy { top: 168px; right: var(--rp-pad); max-width: none; }
  .rp-hero__title { font-size: 38px; }
  .rp-card {
    left: var(--rp-pad);
    right: var(--rp-pad);
    width: auto;
    bottom: -74px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
    z-index: 2;
  }
  .rp-stats__aside { padding-top: 130px; }
}

@media (max-width: 620px) {
  :root { --rp-pad: 20px; --rp-inset: 20px; }
  /* A 16:9 clip cropped into a tall phone hero loses most of the frame, and
     it is a 1.4 MB download on mobile data - the still does the job here. */
  .rp-hero__video { display: none; }
  /* Brand + CTA + burger only just fit across a phone, so everything in the
     bar comes down a size and the gaps close up. */
  .rp-brand { font-size: 14px; letter-spacing: .14em; }
  .rp-cta { font-size: 9px; padding: 11px 14px; letter-spacing: .14em; }
  .rp-bar { padding: 18px var(--rp-pad); }
  .rp-bar__right { gap: 10px; }
  .rp-burger { width: 38px; height: 38px; }
  .rp-drawer__close { top: 18px; width: 38px; height: 38px; }
  .rp-drawer { padding: 76px var(--rp-pad) 32px; }
  .rp-burger span, .rp-burger::before, .rp-burger::after { left: 10px; width: 16px; }
  .rp-burger::before { top: 13px; }
  .rp-burger span    { top: 18px; }
  .rp-burger::after  { top: 23px; }
  /* Strategy / Traffic / Analytics no longer fits on one line at this width. */
  .rp-card__feet { gap: 10px; padding: 16px 22px; flex-wrap: wrap; row-gap: 8px; }
  .rp-card__body { padding: 28px 22px 22px; }
  .rp-hero { height: 560px; }
  .rp-hero__copy { top: 140px; }
  .rp-hero__title { font-size: 30px; }
  .rp-eyebrow__text { font-size: 10px; letter-spacing: .24em; }
  .rp-figs { gap: 28px; }
  .rp-stats__main { grid-template-columns: 1fr; gap: 32px; }
  .rp-metric__num { font-size: 38px; }
  .rp-footline { font-size: 9.5px; letter-spacing: .22em; }
}

/* --------------------------------------------------------------------------
   Inner pages - plain fallback, the canvas only covers the homepage
   -------------------------------------------------------------------------- */
.rp-inner { padding: 140px var(--rp-pad) 96px; max-width: 820px; margin: 0 auto; }
.rp-inner h1 { font-size: 42px; font-weight: 200; letter-spacing: -.02em; margin: 0 0 28px; }
.rp-inner h2 { font-size: 26px; font-weight: 300; margin: 44px 0 14px; }
.rp-inner p,
.rp-inner li { font-size: 16px; font-weight: 300; line-height: 1.85; color: var(--rp-ink-soft); }
.rp-inner img { max-width: 100%; height: auto; }
.rp-inner__back {
  display: inline-block;
  margin-top: 40px;
  font-family: var(--rp-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rp-accent);
}
.rp-topbar--solid { position: static; background: var(--rp-dark); }