/* ==========================================================================
   Reeni — main stylesheet
   Token system first, then layout primitives, then sections in page order.
   Every colour/size below is a variable so a child theme or the Customizer
   can re-skin the whole theme without touching section CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --r-bg:           #0b0b0b;
  --r-bg-deep:      #050505;
  --r-surface:      #131313;
  --r-surface-2:    #191919;
  --r-line:         #262626;
  --r-line-soft:    #1e1e1e;

  /* Ink */
  --r-text:         #ffffff;
  --r-text-dim:     #b6b6b6;
  --r-muted:        #868686;

  /* Accent */
  --r-red:          #f5333f;
  --r-red-deep:     #c01722;
  --r-red-glow:     rgba(245, 51, 63, .35);

  /* Type */
  --r-font-head:    'Space Grotesk', 'Segoe UI', sans-serif;
  --r-font-body:    'Inter', 'Segoe UI', sans-serif;

  --r-fs-display:   clamp(2.75rem, 6.2vw, 5.25rem);
  --r-fs-h2:        clamp(1.75rem, 3.2vw, 2.65rem);
  --r-fs-h3:        clamp(1.15rem, 1.7vw, 1.5rem);
  --r-fs-body:      .95rem;
  --r-fs-small:     .8rem;

  /* Space + shape */
  --r-container:    1290px;
  --r-gutter:       24px;
  --r-section-y:    clamp(60px, 8vw, 110px);
  --r-radius:       14px;
  --r-radius-lg:    22px;
  --r-radius-pill:  100px;

  --r-ease:         cubic-bezier(.22, .61, .36, 1);
  --r-t:            .38s var(--r-ease);
}

/* Light mode — driven by the side toggle, stored in localStorage */
html[data-r-mode="light"] {
  --r-bg:        #f4f4f5;
  --r-bg-deep:   #ebebec;
  --r-surface:   #ffffff;
  --r-surface-2: #f7f7f8;
  --r-line:      #e2e2e4;
  --r-line-soft: #ededef;
  --r-text:      #101010;
  --r-text-dim:  #3d3d3d;
  --r-muted:     #6b6b6b;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--r-bg);
  color: var(--r-text);
  font-family: var(--r-font-body);
  font-size: var(--r-fs-body);
  line-height: 1.75;
  overflow-x: hidden;
  transition: background .4s var(--r-ease), color .4s var(--r-ease);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--r-font-head);
  color: var(--r-text);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
}

p { margin: 0 0 1.1em; color: var(--r-text-dim); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color var(--r-t); }
a:hover { color: var(--r-red); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--r-red);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--r-red); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.r-container {
  width: 100%;
  max-width: var(--r-container);
  margin-inline: auto;
  padding-inline: var(--r-gutter);
}

.r-section { padding-block: var(--r-section-y); position: relative; }
.r-section--deep { background: var(--r-bg-deep); }

.r-grid { display: grid; gap: 22px; }
.r-grid--2 { grid-template-columns: repeat(2, 1fr); }
.r-grid--3 { grid-template-columns: repeat(3, 1fr); }
.r-grid--4 { grid-template-columns: repeat(4, 1fr); }

.r-card {
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  padding: 26px;
  transition: border-color var(--r-t), transform var(--r-t), background var(--r-t);
}
.r-card:hover { border-color: var(--r-red); transform: translateY(-4px); }

/* Section heading block ---------------------------------------------------- */
.r-head { max-width: 640px; }
.r-head--center { margin-inline: auto; text-align: center; }

.r-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--r-font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--r-red);
  margin-bottom: 14px;
}
.r-eyebrow::before,
.r-eyebrow::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--r-red);
  opacity: .6;
}
.r-head:not(.r-head--center) .r-eyebrow::before { display: none; }
.r-head:not(.r-head--center) .r-eyebrow::after  { display: none; }

.r-title { font-size: var(--r-fs-h2); margin-bottom: 14px; }
.r-title em { font-style: italic; color: var(--r-red); }
.r-sub { color: var(--r-muted); font-size: .9rem; margin: 0; }

/* Buttons ------------------------------------------------------------------ */
.r-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-radius-pill);
  background: var(--r-red);
  color: #fff;
  font-family: var(--r-font-head);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--r-t), transform var(--r-t), box-shadow var(--r-t);
}
.r-btn:hover {
  background: var(--r-red-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px var(--r-red-glow);
}
.r-btn svg { width: 14px; height: 14px; }

.r-btn--ghost {
  background: transparent;
  border-color: var(--r-line);
  color: var(--r-text);
}
.r-btn--ghost:hover { background: var(--r-red); border-color: var(--r-red); }

.r-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--r-font-head);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--r-text);
}
.r-link svg { width: 12px; height: 12px; transition: transform var(--r-t); }
.r-link:hover svg { transform: translateX(4px); }

/* Social icon row ---------------------------------------------------------- */
.r-socials { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.r-socials a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--r-line);
  border-radius: 50%;
  color: var(--r-text-dim);
  transition: all var(--r-t);
}
.r-socials a:hover { background: var(--r-red); border-color: var(--r-red); color: #fff; }
.r-socials svg { width: 14px; height: 14px; }

/* Scroll reveal ------------------------------------------------------------ */
.r-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--r-ease), transform .7s var(--r-ease);
}
.r-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   4. Header / navigation
   -------------------------------------------------------------------------- */
.r-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  padding-block: 18px;
  transition: background var(--r-t), padding var(--r-t), border-color var(--r-t);
  border-bottom: 1px solid transparent;
}
.r-header.is-stuck {
  background: color-mix(in srgb, var(--r-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  padding-block: 11px;
  border-bottom-color: var(--r-line-soft);
}
.r-header__inner { display: flex; align-items: center; gap: 30px; }

.r-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--r-font-head);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--r-text);
}
.r-brand__mark { width: 22px; height: 22px; color: var(--r-red); }
.r-brand img { max-height: 38px; width: auto; }

.r-nav { margin-inline: auto; }
.r-nav ul { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.r-nav li { position: relative; }
.r-nav a {
  display: block;
  padding: 9px 15px;
  font-family: var(--r-font-head);
  font-size: .86rem;
  font-weight: 500;
  color: var(--r-text-dim);
}
.r-nav a:hover,
.r-nav .current-menu-item > a,
.r-nav .current_page_item > a { color: var(--r-red); }

.r-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.r-nav .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 208px;
  padding: 9px;
  display: block;
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--r-t);
}
.r-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.r-nav .sub-menu a { padding: 8px 12px; border-radius: 8px; font-size: .82rem; }
.r-nav .sub-menu a:hover { background: var(--r-surface-2); }
.r-nav .sub-menu .sub-menu { top: -10px; left: calc(100% + 8px); }

.r-header__actions { display: flex; align-items: center; gap: 14px; }

.r-header__cta {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--r-red);
  color: #fff;
  transition: transform var(--r-t), background var(--r-t);
}
.r-header__cta:hover { transform: rotate(45deg); background: var(--r-red-deep); color: #fff; }
.r-header__cta svg { width: 15px; height: 15px; }

.r-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--r-line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.r-burger span {
  display: block;
  width: 17px; height: 1.6px;
  margin: 3.5px auto;
  background: var(--r-text);
  transition: transform var(--r-t), opacity var(--r-t);
}
.r-burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.r-burger.is-open span:nth-child(2) { opacity: 0; }
.r-burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.r-hero {
  position: relative;
  padding-top: clamp(120px, 14vw, 165px);
  padding-bottom: clamp(40px, 6vw, 70px);
  overflow: hidden;
}
.r-hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 1.15fr) .78fr;
  align-items: center;
  gap: 30px;
}

.r-hero__kicker {
  font-family: var(--r-font-head);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--r-muted);
  margin-bottom: 10px;
}
.r-hero__name {
  font-size: var(--r-fs-display);
  line-height: .96;
  letter-spacing: -.045em;
  margin-bottom: 26px;
}
.r-hero__name span { display: block; }

.r-hero__figure { position: relative; align-self: end; }
.r-hero__figure img {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.r-hero__figure::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8%;
  translate: -50% 0;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--r-red-glow) 0%, transparent 68%);
  filter: blur(28px);
}

.r-hero__about {
  background: transparent;
}
.r-hero__about h4 {
  font-size: .96rem;
  margin-bottom: 12px;
}
.r-hero__about p { font-size: .84rem; line-height: 1.85; color: var(--r-muted); }
.r-hero__about strong { color: var(--r-red); font-weight: 600; }
.r-hero__about .r-hero__find {
  font-family: var(--r-font-head);
  font-size: .8rem;
  font-weight: 600;
  color: var(--r-text);
  margin: 22px 0 12px;
}

/* Oversized outline wordmark behind the hero */
.r-hero__wordmark {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: max-content;
  font-family: var(--r-font-head);
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--r-red);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.r-hero__wordmark--ghost {
  bottom: 14%;
  -webkit-text-stroke: 1.4px var(--r-line);
  opacity: .8;
}

/* --------------------------------------------------------------------------
   6. Service cards
   -------------------------------------------------------------------------- */
.r-service {
  text-align: center;
  padding: 34px 20px 30px;
}
.r-service__icon {
  width: 46px; height: 46px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  color: var(--r-red);
}
.r-service__icon svg,
.r-service__icon img { width: 100%; height: 100%; object-fit: contain; }
.r-service h3 { font-size: 1.02rem; margin-bottom: 4px; }
.r-service span { font-size: .78rem; color: var(--r-muted); }

/* --------------------------------------------------------------------------
   7. Experience + counters
   -------------------------------------------------------------------------- */
.r-stats { display: grid; grid-template-columns: 1.32fr 1fr 1fr; gap: 18px; }

.r-stats__lead {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  padding: 34px 30px;
  position: relative;
  overflow: hidden;
}
.r-stats__lead::before {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--r-red-glow), transparent 70%);
  filter: blur(30px);
}
.r-stats__lead-top { display: flex; align-items: center; gap: 18px; position: relative; }
.r-stats__big {
  font-family: var(--r-font-head);
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  font-weight: 700;
  line-height: .85;
  color: var(--r-red);
  letter-spacing: -.05em;
}
.r-stats__lead h3 { font-size: var(--r-fs-h3); margin: 0; max-width: 8ch; }
.r-stats__lead p { font-size: .82rem; color: var(--r-muted); margin: 0; position: relative; }

.r-counter {
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  padding: 30px 26px;
  text-align: center;
  transition: border-color var(--r-t);
}
.r-counter:hover { border-color: var(--r-red); }
.r-counter__num {
  font-family: var(--r-font-head);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.r-counter__label { font-size: .78rem; color: var(--r-muted); }

/* --------------------------------------------------------------------------
   8. Process accordion
   -------------------------------------------------------------------------- */
.r-process {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: center;
  margin-top: 46px;
}
.r-process__list { display: flex; flex-direction: column; gap: 14px; }

.r-process__item {
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color var(--r-t), background var(--r-t);
}
.r-process__item:hover { border-color: var(--r-red); }
.r-process__item.is-open { border-color: var(--r-red); background: var(--r-surface-2); }

.r-process__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--r-font-head);
  font-size: 1rem;
  font-weight: 600;
}
.r-process__num { color: var(--r-red); font-variant-numeric: tabular-nums; }

.r-process__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--r-t);
}
.r-process__item.is-open .r-process__body { grid-template-rows: 1fr; }
.r-process__body > div { overflow: hidden; }
.r-process__body p {
  font-size: .84rem;
  color: var(--r-muted);
  margin: 10px 0 0;
}

/* Circular portrait with orbit accents */
.r-process__media {
  position: relative;
  aspect-ratio: 1;
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.r-process__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.r-process__media::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid var(--r-line);
  border-radius: 50%;
}
.r-process__dot {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--r-red);
}
.r-process__dot--a { top: 8%; right: 6%; }
.r-process__dot--b { bottom: 22%; left: -2%; width: 10px; height: 10px; }
.r-process__arc {
  position: absolute;
  right: -6%;
  bottom: 12%;
  width: 92px; height: 46px;
  background: var(--r-red);
  border-radius: 0 0 92px 92px;
}

/* --------------------------------------------------------------------------
   9. Skill bars
   -------------------------------------------------------------------------- */
.r-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }
.r-skills__col h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.06rem;
  margin-bottom: 26px;
}
.r-skills__col h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--r-line);
}

.r-bar { margin-bottom: 22px; }
.r-bar__top {
  display: flex;
  justify-content: space-between;
  font-family: var(--r-font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.r-bar__track {
  height: 3px;
  border-radius: 3px;
  background: var(--r-line);
  overflow: hidden;
}
.r-bar__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--r-red-deep), var(--r-red));
  transition: width 1.3s var(--r-ease);
}

/* --------------------------------------------------------------------------
   10. Education / experience timeline cards
   -------------------------------------------------------------------------- */
.r-edu h3 { font-size: 1.02rem; margin-bottom: 2px; }
.r-edu__years {
  font-family: var(--r-font-head);
  font-size: .76rem;
  font-weight: 600;
  color: var(--r-red);
  margin-bottom: 12px;
  display: block;
}
.r-edu p { font-size: .82rem; color: var(--r-muted); margin: 0; }

.r-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.r-exp__media img { border-radius: var(--r-radius); width: 100%; }

.r-exp__item {
  border-bottom: 1px solid var(--r-line);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.r-exp__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.r-exp__tag {
  font-family: var(--r-font-head);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--r-red);
}
.r-exp__item h4 { font-size: .98rem; margin: 6px 0 2px; }
.r-exp__role { font-size: .78rem; color: var(--r-muted); display: block; margin-bottom: 10px; }
.r-exp__item p { font-size: .82rem; color: var(--r-muted); margin: 0; }

/* --------------------------------------------------------------------------
   11. Brand strip
   -------------------------------------------------------------------------- */
.r-brands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  overflow: hidden;
}
.r-brands__item {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 22px;
  border-right: 1px solid var(--r-line);
  border-bottom: 1px solid var(--r-line);
  transition: background var(--r-t);
}
.r-brands__item:hover { background: var(--r-surface); }
.r-brands__item:nth-child(4n) { border-right: 0; }
.r-brands__item:nth-last-child(-n+4) { border-bottom: 0; }
.r-brands__item img {
  max-height: 30px;
  width: auto;
  opacity: .55;
  filter: grayscale(1) brightness(2.4);
  transition: opacity var(--r-t), filter var(--r-t);
}
.r-brands__item:hover img { opacity: 1; filter: none; }
.r-brands__item span {
  font-family: var(--r-font-head);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--r-text-dim);
}

/* --------------------------------------------------------------------------
   12. Portfolio (staggered grid)
   -------------------------------------------------------------------------- */
.r-portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 40px;
  margin-top: 50px;
  /* The even column is pushed down, so reserve that space at the end
     instead of letting it bleed into the next section. */
  padding-bottom: 60px;
}
.r-portfolio__item:nth-child(even) { transform: translateY(60px); }

.r-pf-card__media {
  position: relative;
  border-radius: var(--r-radius);
  overflow: hidden;
  background: var(--r-surface);
  aspect-ratio: 16 / 11;
}
.r-pf-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--r-ease);
}
.r-pf-card:hover .r-pf-card__media img { transform: scale(1.06); }

.r-pf-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
}
.r-pf-card h3 { font-size: 1.02rem; margin: 0 0 2px; }
.r-pf-card__cat { font-size: .76rem; color: var(--r-muted); }
.r-pf-card__go {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--r-line);
  border-radius: 8px;
  transition: all var(--r-t);
}
.r-pf-card:hover .r-pf-card__go { background: var(--r-red); border-color: var(--r-red); color: #fff; }
.r-pf-card__go svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   13. Expertise accordion (icon rows)
   -------------------------------------------------------------------------- */
.r-expertise { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }

.r-expertise__row {
  display: grid;
  grid-template-columns: 44px minmax(180px, 250px) 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  background: var(--r-surface);
  transition: background var(--r-t), border-color var(--r-t), color var(--r-t);
}
.r-expertise__row:hover { border-color: var(--r-red); }
.r-expertise__row.is-active {
  background: var(--r-red);
  border-color: var(--r-red);
  color: #fff;
}
.r-expertise__row.is-active h3,
.r-expertise__row.is-active p,
.r-expertise__row.is-active .r-expertise__count { color: #fff; }
.r-expertise__row.is-active .r-link { color: #fff; }

.r-expertise__icon { width: 30px; height: 30px; color: var(--r-red); }
.r-expertise__row.is-active .r-expertise__icon { color: #fff; }
.r-expertise__icon svg, .r-expertise__icon img { width: 100%; height: 100%; object-fit: contain; }

.r-expertise__row h3 { font-size: 1.02rem; margin: 0 0 2px; }
.r-expertise__count { font-size: .74rem; color: var(--r-muted); }
.r-expertise__row p { font-size: .82rem; color: var(--r-muted); margin: 0; }

/* --------------------------------------------------------------------------
   14. Pricing
   -------------------------------------------------------------------------- */
.r-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 50px;
}
.r-price {
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  padding: 30px 28px;
  transition: border-color var(--r-t), transform var(--r-t);
}
.r-price:hover { border-color: var(--r-red); }
.r-price--featured {
  padding-block: 46px;
  border-color: var(--r-red);
  box-shadow: 0 24px 60px -30px var(--r-red-glow);
}
.r-price__name {
  font-family: var(--r-font-head);
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.r-price__amount {
  font-family: var(--r-font-head);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.r-price__per { font-size: .74rem; color: var(--r-muted); display: block; margin-top: 6px; }
.r-price__list { list-style: none; margin: 22px 0; padding: 0; }
.r-price__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--r-text-dim);
  padding: 6px 0;
}
.r-price__list svg { width: 14px; height: 14px; flex: none; color: var(--r-red); }
.r-price__list li.is-off { opacity: .4; }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.r-quote { padding: 32px 30px; }
.r-quote__mark { width: 30px; height: 30px; color: var(--r-red); margin-bottom: 18px; }
.r-quote p { font-size: .86rem; color: var(--r-muted); margin-bottom: 22px; }
.r-quote__author { display: flex; align-items: center; gap: 12px; }
.r-quote__author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.r-quote__author h4 { font-size: .9rem; margin: 0; }
.r-quote__author span { font-size: .76rem; color: var(--r-muted); }

/* --------------------------------------------------------------------------
   16. Blog cards
   -------------------------------------------------------------------------- */
.r-post__media {
  position: relative;
  border-radius: var(--r-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--r-surface);
}
.r-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--r-ease); }
.r-post:hover .r-post__media img { transform: scale(1.06); }

.r-post__date {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-radius-pill);
  background: color-mix(in srgb, var(--r-bg) 82%, transparent);
  backdrop-filter: blur(8px);
  font-size: .72rem;
  color: var(--r-text);
}
.r-post__date svg { width: 12px; height: 12px; color: var(--r-red); }

.r-post h3 { font-size: 1rem; margin: 18px 0 12px; }
.r-post h3 a:hover { color: var(--r-red); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.r-footer {
  position: relative;
  background: var(--r-bg-deep);
  padding-top: var(--r-section-y);
  overflow: hidden;
}
.r-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
}
.r-footer__cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  margin: 20px 0 24px;
}
.r-footer__cta h2 span { color: var(--r-red); }

.r-subscribe { display: flex; align-items: center; gap: 10px; max-width: 380px; }
.r-subscribe input {
  flex: 1;
  padding: 13px 18px;
  background: transparent;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-pill);
  color: var(--r-text);
  font-size: .84rem;
}
.r-subscribe input::placeholder { color: var(--r-muted); }
.r-subscribe input:focus { outline: none; border-color: var(--r-red); }
.r-subscribe button {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--r-red);
  color: #fff;
  cursor: pointer;
  transition: background var(--r-t), transform var(--r-t);
}
.r-subscribe button:hover { background: var(--r-red-deep); transform: translateY(-2px); }
.r-subscribe svg { width: 15px; height: 15px; }

.r-footer h4 { font-size: .95rem; margin-bottom: 18px; }
.r-footer ul { list-style: none; margin: 0; padding: 0; }
.r-footer li { margin-bottom: 10px; font-size: .85rem; color: var(--r-text-dim); }
.r-footer__contact li { display: flex; align-items: flex-start; gap: 11px; }
.r-footer__contact svg { width: 15px; height: 15px; margin-top: 5px; flex: none; color: var(--r-red); }

.r-footer__bottom {
  border-top: 1px solid var(--r-line);
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--r-muted);
}
.r-footer__bottom ul { display: flex; gap: 22px; }
.r-footer__bottom li { margin: 0; font-size: .8rem; }

.r-footer__watermark {
  position: absolute;
  left: -2%;
  bottom: 6%;
  font-family: var(--r-font-head);
  font-size: clamp(5rem, 16vw, 15rem);
  font-weight: 700;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--r-line);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   18. Floating utilities
   -------------------------------------------------------------------------- */
.r-totop {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 800;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--r-red);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--r-t);
}
.r-totop.is-shown { opacity: 1; visibility: visible; transform: none; }
.r-totop svg { width: 15px; height: 15px; }

.r-modeswitch {
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  border: 1px solid var(--r-line);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--r-surface);
  color: var(--r-text-dim);
  cursor: pointer;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.r-modeswitch:hover { color: var(--r-red); }
.r-modeswitch svg { width: 15px; height: 15px; writing-mode: horizontal-tb; }

/* --------------------------------------------------------------------------
   19. Blog / single / comments (inner pages)
   -------------------------------------------------------------------------- */
.r-page-hero {
  padding-top: clamp(130px, 15vw, 175px);
  padding-bottom: var(--r-section-y);
  text-align: center;
  background: var(--r-bg-deep);
  border-bottom: 1px solid var(--r-line-soft);
}
.r-page-hero h1 { font-size: var(--r-fs-h2); margin-bottom: 10px; }
.r-breadcrumb { font-size: .82rem; color: var(--r-muted); }
.r-breadcrumb a:hover { color: var(--r-red); }

.r-entry { max-width: 820px; margin-inline: auto; }
.r-entry img { border-radius: var(--r-radius); }
.r-entry blockquote {
  margin: 26px 0;
  padding: 22px 26px;
  border-left: 3px solid var(--r-red);
  background: var(--r-surface);
  border-radius: 0 var(--r-radius) var(--r-radius) 0;
}
.r-entry :is(h2, h3, h4) { margin-top: 1.6em; }
.r-entry code, .r-entry pre {
  background: var(--r-surface-2);
  border: 1px solid var(--r-line);
  border-radius: 8px;
}
.r-entry code { padding: 2px 6px; font-size: .86em; }
.r-entry pre { padding: 18px; overflow-x: auto; }

.r-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 46px; }
.r-pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  padding-inline: 12px;
  border: 1px solid var(--r-line);
  border-radius: 10px;
  font-size: .84rem;
}
.r-pagination .page-numbers:hover,
.r-pagination .current { background: var(--r-red); border-color: var(--r-red); color: #fff; }

.r-comments { max-width: 820px; margin: 60px auto 0; }
.r-comments ol { list-style: none; padding: 0; }
.r-comments .comment-body {
  padding: 22px;
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  margin-bottom: 16px;
}
.r-comments .children { padding-left: 28px; }
.r-comments input:not([type="submit"]),
.r-comments textarea {
  width: 100%;
  padding: 13px 18px;
  margin-bottom: 14px;
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius);
  color: var(--r-text);
  font-size: .86rem;
}
.r-comments input:focus, .r-comments textarea:focus { outline: none; border-color: var(--r-red); }
.r-comments input[type="submit"] {
  padding: 13px 26px;
  border: 0;
  border-radius: var(--r-radius-pill);
  background: var(--r-red);
  color: #fff;
  font-family: var(--r-font-head);
  font-weight: 600;
  cursor: pointer;
}

.r-404 { text-align: center; padding-block: clamp(140px, 18vw, 220px); }
.r-404__code {
  font-family: var(--r-font-head);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 700;
  line-height: 1;
  color: var(--r-red);
  letter-spacing: -.05em;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .r-hero__inner { grid-template-columns: 1fr 1fr; }
  .r-hero__about { grid-column: 1 / -1; max-width: 520px; }
  .r-expertise__row { grid-template-columns: 40px 1fr auto; }
  .r-expertise__row p { display: none; }
}

@media (max-width: 991px) {
  .r-burger { display: block; }
  .r-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    padding: 90px 24px 30px;
    background: var(--r-surface);
    border-left: 1px solid var(--r-line);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .42s var(--r-ease);
    margin: 0;
    z-index: 950;
  }
  .r-nav.is-open { transform: none; }
  .r-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .r-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: var(--r-surface-2);
    display: none;
    margin: 4px 0 6px;
  }
  .r-nav li.is-expanded > .sub-menu { display: block; }
  .r-header__inner { justify-content: space-between; }
  .r-header__actions .r-socials { display: none; }

  .r-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .r-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .r-stats { grid-template-columns: 1fr 1fr; }
  .r-stats__lead { grid-column: 1 / -1; grid-row: auto; }
  .r-process { grid-template-columns: 1fr; gap: 36px; }
  .r-process__media { order: -1; max-width: 320px; }
  .r-skills { grid-template-columns: 1fr; gap: 32px; }
  .r-exp { grid-template-columns: 1fr; }
  .r-brands { grid-template-columns: repeat(2, 1fr); }
  .r-brands__item:nth-child(4n) { border-right: 1px solid var(--r-line); }
  .r-brands__item:nth-child(2n) { border-right: 0; }
  .r-brands__item:nth-last-child(-n+4) { border-bottom: 1px solid var(--r-line); }
  .r-brands__item:nth-last-child(-n+2) { border-bottom: 0; }
  .r-portfolio { gap: 26px; }
  .r-portfolio__item:nth-child(even) { transform: none; }
  .r-portfolio { padding-bottom: 0; }
  .r-pricing { grid-template-columns: 1fr; }
  .r-price--featured { padding-block: 30px; }
  .r-footer__top { grid-template-columns: 1fr 1fr; }
  .r-footer__cta { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --r-gutter: 18px; }
  .r-hero__inner { grid-template-columns: 1fr; text-align: left; }
  .r-hero__figure { max-width: 340px; }
  .r-grid--4, .r-grid--3, .r-grid--2, .r-portfolio { grid-template-columns: 1fr; }
  .r-stats { grid-template-columns: 1fr; }
  .r-expertise__row { grid-template-columns: 34px 1fr; row-gap: 12px; padding: 20px; }
  .r-expertise__row .r-link { grid-column: 2; }
  .r-footer__top { grid-template-columns: 1fr; }
  .r-footer__bottom { flex-direction: column; align-items: flex-start; }
  .r-modeswitch { display: none; }
}

/* --------------------------------------------------------------------------
   21. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .r-reveal { opacity: 1; transform: none; }
}