/* RAVELL Solutions — global styles (ported from the Claude Design prototype) */

:root {
  --green: #96C93F;
  --green-d: #6f9e2b;
  --ink: #31332D;
  --ink-deep: #22241D;
  --paper: #F6F7F3;
  --paper2: #FFFFFF;
  --line: #E4E6DE;
  --muted: #63665C;
  --wash: #EDF4DD;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Hind Guntur', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-lang="ar"] body { font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; }
html[data-lang="ku"] body { font-family: 'Vazirmatn', 'Noto Sans Arabic', system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: normal !important; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
::selection { background: var(--green); color: var(--ink-deep); }

img.fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Wordmark stays LTR and in the latin display face in every language */
.wordmark { font-family: 'Hind Guntur', sans-serif; font-weight: 700; }

@keyframes rv-grid { to { background-position: 44px 44px; } }
@keyframes rv-pulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes rv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rv-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes rv-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.marquee-track { display: flex; white-space: nowrap; width: max-content; animation: rv-marquee 32s linear infinite; }
[dir="rtl"] .marquee-track { animation-name: rv-marquee-rtl; }

[data-reveal] { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 0;
      animation: rv-rise linear both;
      animation-timeline: view();
      animation-range: entry 3% cover 22%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .anim-grid, .anim-pulse { animation: none !important; }
  html { scroll-behavior: auto; }
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(150, 201, 63, .18);
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

@media (max-width: 1024px) { [data-desktop] { display: none !important; } }
@media (min-width: 1025px) { [data-mobileonly] { display: none !important; } }
@media (max-width: 920px) {
  [data-two] { grid-template-columns: 1fr !important; }
  [data-hero-grid] { grid-template-columns: 1fr !important; }
  [data-hero-media] { display: none !important; }
  [data-proj-grid] { grid-template-columns: 1fr 1fr !important; }
  [data-proj-grid] > * { grid-area: auto !important; min-height: 180px; }
}

[data-flip] { transition: transform .25s; }
[dir="rtl"] [data-flip] { transform: scaleX(-1); }

/* Hover states (the prototype expressed these as style-hover attributes) */
.hv-nav { transition: opacity .15s, background .15s; }
.hv-nav:hover { opacity: 1 !important; background: rgba(49, 51, 45, .05); }

.hv-border { transition: border-color .2s; }
.hv-border:hover { border-color: var(--green) !important; }

.hv-wash { transition: background .15s; }
.hv-wash:hover { background: var(--wash); }

.hv-dim { transition: filter .15s, transform .15s; }
.hv-dim:hover { filter: brightness(.95); }

.hv-dim-lift:hover { filter: brightness(.95); transform: translateY(-1px); }
.hv-dim-lift { transition: filter .15s, transform .15s; }

.hv-outline-light { transition: border-color .2s, background .2s; }
.hv-outline-light:hover { border-color: var(--green); background: rgba(255, 255, 255, .04); }

.hv-gap { transition: gap .2s; }
.hv-gap:hover { gap: 14px; }

.hv-bright105 { transition: filter .15s; }
.hv-bright105:hover { filter: brightness(1.05); }
.hv-bright107 { transition: filter .15s; }
.hv-bright107:hover { filter: brightness(1.07); }
.hv-bright115 { transition: filter .15s; }
.hv-bright115:hover { filter: brightness(1.15); }

.hv-lift2 { transition: transform .2s; }
.hv-lift2:hover { transform: translateY(-2px); }

.hv-card { transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
.hv-card-div:hover { border-color: var(--green) !important; transform: translateY(-4px); box-shadow: 0 24px 48px rgba(34, 36, 29, .08); }
.hv-card-branch:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(34, 36, 29, .16); }
.hv-card-lift3:hover { border-color: var(--green) !important; transform: translateY(-3px); }
.hv-card-svc:hover { border-color: var(--green) !important; background: var(--paper2); transform: translateY(-3px); box-shadow: 0 18px 36px rgba(34, 36, 29, .07); }

.hv-green-d { transition: color .15s; }
.hv-green-d:hover { color: var(--green-d) !important; }
.hv-green { transition: color .15s; }
.hv-green:hover { color: var(--green) !important; }