/* ==========================================================================
   Ruth M. Tibi, Adv. — Design Tokens & Core System
   Direction: "Established. Personal. Precise."
   Deep oxblood and burgundy, the gold of the RM monogram, charcoal type and
   warm ivory paper. Serif display type carries the authority; generous space and quiet
   detail carry the care.
   ========================================================================== */

:root {
  /* --- Ink (deep oxblood) --- */
  --rmt-ink-950:        #230B10;   /* footer */
  --rmt-ink-900:        #2E0F15;   /* header, heroes, dark bands */
  --rmt-ink-800:        #3D161E;   /* raised surfaces on dark */
  --rmt-ink-700:        #4E1C27;   /* borders / hover on dark */
  --rmt-on-dark:        #F7F4EF;   /* primary text on dark */
  --rmt-on-dark-muted:  #D3C8C0;   /* secondary text on dark (10.7:1) */
  --rmt-on-dark-faint:  #AB9B8E;   /* tertiary text on dark (6.5:1) */
  --rmt-line-dark:      rgba(247, 244, 239, 0.12);

  /* --- Paper (warm ivory) --- */
  --rmt-paper:          #F7F4EF;   /* page background */
  --rmt-stone:          #EFE9E2;   /* alternate sections */
  --rmt-sand:           #E1D7CD;   /* hairlines on stone */
  --rmt-line:           #E4DCD3;   /* hairlines on paper */
  --rmt-card:           #FCFAF7;   /* raised cards / inputs */
  --rmt-white:          #FFFFFF;

  /* --- Text on light --- */
  --rmt-ink:            #3C3334;   /* body & headings (11.2:1) */
  --rmt-muted:          #6B5F58;   /* secondary (5.6:1) */

  /* --- Accent (the names say copper; the colors are the palette's burgundy and gold) --- */
  --rmt-copper:         #4E1C27;   /* burgundy: buttons on light, white label 13.8:1 */
  --rmt-copper-deep:    #7A2C3C;   /* accent text on light (8.5:1), button hover */
  --rmt-copper-bright:  #BFA06A;   /* gold: accent and buttons on dark (7.1:1) */
  --rmt-copper-glow:    #D2B784;
  --rmt-copper-tint:    #F2E6E3;
  --rmt-monogram:       linear-gradient(90deg, #CDB07A 0%, #B08F55 100%);

  /* --- Legacy aliases (kept so inline styles in page content keep resolving) --- */
  --rmt-accent:         var(--rmt-copper-deep);
  --rmt-accent-dark:    #5E2230;
  --rmt-accent-tint:    var(--rmt-copper-tint);
  --rmt-accent-light:   var(--rmt-copper-bright);
  --rmt-orange:         var(--rmt-copper);
  --rmt-orange-light:   var(--rmt-copper-glow);
  --rmt-orange-dark:    var(--rmt-copper-deep);
  --rmt-orange-gradient: linear-gradient(135deg, #5E2230 0%, #4E1C27 100%);
  --rmt-gold:           var(--rmt-copper-deep);
  --rmt-gold-tint:      var(--rmt-copper-tint);
  --rmt-charcoal:       var(--rmt-muted);
  --rmt-cream:          var(--rmt-stone);
  --rmt-success:        #2F6B4F;
  --rmt-error:          #A33A3A;

  /* --- Typography --- */
  --rmt-font-serif:     'Frank Ruhl Libre', 'Noto Naskh Arabic', 'David Libre', Georgia, 'Times New Roman', serif;
  --rmt-font-sans:      'Heebo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --rmt-display:        clamp(3rem, 1.9rem + 4.6vw, 6rem);
  --rmt-h1:             clamp(2.4rem, 1.75rem + 2.6vw, 4.25rem);
  --rmt-h2:             clamp(1.9rem, 1.45rem + 1.7vw, 3rem);
  --rmt-h3:             clamp(1.25rem, 1.1rem + 0.55vw, 1.6rem);
  --rmt-h4:             clamp(1.08rem, 1.02rem + 0.25vw, 1.25rem);
  --rmt-lead:           clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --rmt-body:           clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --rmt-small:          0.9rem;
  --rmt-micro:          0.8rem;

  --rmt-lh-tight:       1.08;
  --rmt-lh-heading:     1.22;
  --rmt-lh-body:        1.75;

  /* --- Spacing (8px system) --- */
  --rmt-space-1:        0.25rem;
  --rmt-space-2:        0.5rem;
  --rmt-space-3:        0.75rem;
  --rmt-space-4:        1rem;
  --rmt-space-5:        1.5rem;
  --rmt-space-6:        2rem;
  --rmt-space-8:        3rem;
  --rmt-space-10:       4rem;
  --rmt-space-12:       6rem;
  --rmt-space-16:       8rem;

  --rmt-section-py:     clamp(4.5rem, 3rem + 6vw, 9rem);
  --rmt-container-max:  1240px;
  --rmt-gutter:         clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --rmt-measure-narrow: 720px;

  /* --- Shape & depth: squared corners read as serious, not bubbly --- */
  --rmt-radius-sm:      2px;
  --rmt-radius-md:      4px;
  --rmt-radius-lg:      6px;

  --rmt-shadow-sm:      0 1px 2px rgba(46, 15, 21, 0.05), 0 2px 8px rgba(46, 15, 21, 0.04);
  --rmt-shadow-md:      0 10px 30px -12px rgba(46, 15, 21, 0.18);
  --rmt-shadow-lg:      0 30px 60px -25px rgba(46, 15, 21, 0.35);
  --rmt-shadow-hover:   0 22px 44px -22px rgba(46, 15, 21, 0.32);

  /* --- Motion --- */
  --rmt-duration-fast:   200ms;
  --rmt-duration-normal: 380ms;
  --rmt-duration-slow:   800ms;
  --rmt-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --rmt-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Header --- */
  --rmt-header-height:        84px;
  --rmt-header-height-shrunk: 68px;
  --rmt-header-bg:            var(--rmt-ink-900);
}

/* --------------------------------------------------------------------------
   Base reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rmt-header-height-shrunk) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--rmt-paper);
  color: var(--rmt-ink);
  font-family: var(--rmt-font-sans);
  font-size: var(--rmt-body);
  font-weight: 400;
  line-height: var(--rmt-lh-body);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip (not hidden): hidden would make <body> a scroll container and break the sticky header */
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--rmt-copper);
  color: var(--rmt-white);
}

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

/* --------------------------------------------------------------------------
   Direction & bidirectional text
   -------------------------------------------------------------------------- */
[dir="rtl"] {
  direction: rtl;
  text-align: start;
}

/* Language switching (see components.js): the page stays hidden until a saved
   non-Hebrew language is applied, and transitions are paused for the frame of a switch */
html.rmt-i18n-pending body {
  visibility: hidden;
}
html.rmt-i18n-switching *,
html.rmt-i18n-switching *::before,
html.rmt-i18n-switching *::after {
  transition: none !important;
}

.rmt-ltr-isolate,
span[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Arrows: "forward" points left in RTL; rotated for LTR languages */
.rmt-arrow {
  display: inline-block;
  line-height: 1;
  transition: transform var(--rmt-duration-fast) var(--rmt-ease-out);
}
.rmt-btn:hover .rmt-arrow,
a:hover .rmt-arrow {
  transform: translateX(-4px);
}
[dir="ltr"] .rmt-arrow {
  transform: rotate(180deg);
}
[dir="ltr"] .rmt-btn:hover .rmt-arrow,
[dir="ltr"] a:hover .rmt-arrow {
  transform: rotate(180deg) translateX(-4px);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rmt-font-serif);
  font-weight: 500;
  line-height: var(--rmt-lh-heading);
  color: inherit;
  text-wrap: balance;
}

h1 { font-size: var(--rmt-h1); line-height: var(--rmt-lh-tight); }
h2 { font-size: var(--rmt-h2); line-height: 1.15; }
h3 { font-size: var(--rmt-h3); font-weight: 600; }
h4 { font-size: var(--rmt-h4); font-weight: 600; }

p { text-wrap: pretty; }

strong, b { font-weight: 600; }

/* Arabic reads best with a touch more leading and no serif weight stress */
:lang(ar) body { line-height: 1.9; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.4; }

/* Eyebrow — small label with a copper rule at the reading start */
.rmt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--rmt-font-sans);
  font-size: var(--rmt-micro);
  font-weight: 600;
  color: var(--rmt-copper-deep);
  margin-block-end: var(--rmt-space-4);
}
.rmt-eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background: currentColor;
  flex-shrink: 0;
}
:lang(en) .rmt-eyebrow,
:lang(es) .rmt-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.rmt-lead-text {
  font-size: var(--rmt-lead);
  line-height: 1.7;
  color: var(--rmt-muted);
  max-width: 62ch;
}

.rmt-text-center { text-align: center; }
.rmt-text-center .rmt-lead-text { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.rmt-container {
  width: 100%;
  max-width: calc(var(--rmt-container-max) + 2 * var(--rmt-gutter));
  margin-inline: auto;
  padding-inline: var(--rmt-gutter);
}

.rmt-container-narrow {
  width: 100%;
  max-width: calc(var(--rmt-measure-narrow) + 2 * var(--rmt-gutter));
  margin-inline: auto;
  padding-inline: var(--rmt-gutter);
}

.rmt-section {
  padding-block: var(--rmt-section-py);
  position: relative;
}

.rmt-bg-paper { background-color: var(--rmt-paper); }
.rmt-bg-cream,
.rmt-bg-stone { background-color: var(--rmt-stone); }
.rmt-bg-ink {
  background-color: var(--rmt-ink-900);
  color: var(--rmt-on-dark);
}

.rmt-section-header {
  max-width: 760px;
  margin-block-end: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.rmt-section-header h2 { margin-block-end: var(--rmt-space-4); }
.rmt-section-header.rmt-text-center { margin-inline: auto; }

.rmt-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Motion: scroll reveals + hero entrance
   -------------------------------------------------------------------------- */
.rmt-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--rmt-duration-slow) var(--rmt-ease-out),
              transform var(--rmt-duration-slow) var(--rmt-ease-out);
}
.rmt-reveal.is-revealed {
  opacity: 1;
  transform: none;
}
.rmt-delay-1 { transition-delay: 80ms; }
.rmt-delay-2 { transition-delay: 160ms; }
.rmt-delay-3 { transition-delay: 240ms; }
.rmt-delay-4 { transition-delay: 320ms; }

@keyframes rmtRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rmtFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rmtDrawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.rmt-enter {
  animation: rmtRise 900ms var(--rmt-ease-out) both;
}
.rmt-enter-1 { animation-delay: 80ms; }
.rmt-enter-2 { animation-delay: 200ms; }
.rmt-enter-3 { animation-delay: 320ms; }
.rmt-enter-4 { animation-delay: 440ms; }
.rmt-enter-5 { animation-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .rmt-reveal {
    opacity: 1;
    transform: none;
  }
}