/* ============================================
   Rivaz Ops — Design Tokens
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;600&display=swap');

:root{
  /* base */
  --paper:      #F7F6F1;
  --paper-dim:  #EFEDE4;
  --ink:        #1F3B37;   /* deep teal, from logo */
  --ink-soft:   #4A625E;
  --white:      #FFFFFF;

  /* brand accents, lifted from the logo bars */
  --coral: #E06C7C;
  --leaf:  #4FAE82;
  --gold:  #F0C23B;
  --sky:   #5B9BD5;

  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Caveat', cursive;

  --radius: 3px;
  --border: 1px solid rgba(31,59,55,0.14);
  --container: 1120px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.08; font-weight: 600; }
h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.2; }
h3{ font-size: 1.28rem; line-height: 1.35; }
p{ margin: 0 0 1rem; max-width: 62ch; }
.lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; }

.script{ font-family: var(--font-script); font-size: 1.4em; font-weight: 600; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{
  background: var(--coral);
  color: var(--white);
}
.btn-primary:hover{ background:#c9576a; }
.btn-outline{
  background: transparent;
  border: 1px solid rgba(31,59,55,0.3);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--ink); background: rgba(31,59,55,0.05); }
.btn-on-dark{
  background: var(--paper);
  color: var(--ink);
}
.btn-on-dark:hover{ background: var(--white); }
.btn-ghost-on-dark{
  border: 1px solid rgba(247,246,241,0.35);
  color: var(--paper);
}
.btn-ghost-on-dark:hover{ border-color: var(--paper); background: rgba(247,246,241,0.08); }

/* ============ Header / Nav ============ */
header.site{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(247,246,241,0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--ink);
}
.brand-icon{ width:30px; height:30px; }
.nav-links{
  display:flex;
  align-items:center;
  gap: 34px;
}
.nav-links a{
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--ink);
  border-color: var(--coral);
}
.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-toggle{ display:none; }

@media (max-width: 780px){
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--paper);
    border-bottom: var(--border);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding: 8px 32px 20px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding: 12px 0; width:100%; border-bottom: var(--border); }
  .nav-toggle{
    display:flex;
    width: 38px; height:38px;
    align-items:center; justify-content:center;
    border: var(--border);
    border-radius: var(--radius);
    background:none;
    cursor:pointer;
  }
  .nav-cta .btn-outline{ display:none; }
}

/* ============ Sections generic ============ */
section{ padding: 88px 0; }
.section-tight{ padding: 64px 0; }
.on-dark{ background: var(--ink); color: var(--paper); }
.on-dark h1, .on-dark h2, .on-dark h3{ color: var(--paper); }
.on-dark .lede{ color: rgba(247,246,241,0.78); }
.on-panel{ background: var(--paper-dim); }

.eyebrow-row{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 14px;
}
.bar-mark{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.bar-mark span{ width:4px; display:block; border-radius:1px; }
.bar-mark span:nth-child(1){ height:40%; background:var(--coral); }
.bar-mark span:nth-child(2){ height:65%; background:var(--leaf); }
.bar-mark span:nth-child(3){ height:85%; background:var(--gold); }
.bar-mark span:nth-child(4){ height:100%; background:var(--sky); }
.eyebrow-text{ font-size: 0.85rem; font-weight:600; color: var(--ink-soft); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 40px;
  margin-bottom: 44px;
}
.section-head p{ margin:0; }

/* ============ Hero (home) ============ */
.hero{
  padding-top: 76px;
  padding-bottom: 76px;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
}
.hero-actions{ display:flex; gap:14px; margin-top: 30px; flex-wrap:wrap; }
.hero-note{ margin-top: 34px; font-size:0.88rem; color: rgba(247,246,241,0.6); }

.chart-visual{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: 22px;
  height: 320px;
  padding: 24px;
}
.chart-bar{
  width: 56px;
  border-radius: 6px 6px 0 0;
  position:relative;
  animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.chart-bar span{
  position:absolute;
  top:-30px; left:50%;
  transform:translateX(-50%);
  font-size:0.78rem;
  color: rgba(247,246,241,0.65);
  white-space:nowrap;
}
.chart-bar.b1{ background: var(--coral); height:32%; animation-delay:.05s; }
.chart-bar.b2{ background: var(--leaf);  height:54%; animation-delay:.18s; }
.chart-bar.b3{ background: var(--gold);  height:74%; animation-delay:.31s; }
.chart-bar.b4{ background: var(--sky);   height:100%; animation-delay:.44s; }
@keyframes rise{ from{ transform: scaleY(0); transform-origin:bottom; opacity:0; } to{ transform: scaleY(1); transform-origin:bottom; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .chart-bar{ animation: none; } }

/* ============ Stat strip ============ */
.stat-strip{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 28px;
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 40px 0;
}
.stat b{
  display:block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--ink);
}
.stat span{ font-size:0.88rem; color: var(--ink-soft); }

/* ============ Cards ============ */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; }

.card{
  background: var(--white);
  border: var(--border);
  padding: 30px 28px;
  border-radius: var(--radius);
}
.card .swatch{
  width: 34px; height:6px; border-radius:3px; margin-bottom:20px;
}
.card h3{ margin-bottom:10px; }
.card p{ margin:0; color: var(--ink-soft); font-size:0.96rem; }

.service-category{ margin-bottom: 64px; }
.service-category:last-child{ margin-bottom:0; }
.cat-head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31,59,55,0.16);
}
.cat-head h2{ margin:0; }
.cat-count{ color: var(--ink-soft); font-size:0.9rem; }

/* ============ Split rows (about / approach) ============ */
.split{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items:start;
}
.split.rev{ grid-template-columns: 1.15fr 0.85fr; }
.split.rev .split-media{ order:2; }

.value-list{ display:flex; flex-direction:column; gap:26px; }
.value-item{ display:flex; gap:18px; }
.value-index{
  font-family: var(--font-display);
  font-size:1.4rem;
  color: var(--coral);
  flex-shrink:0;
  width: 30px;
}
.value-item h3{ margin-bottom:6px; }
.value-item p{ margin:0; color: var(--ink-soft); font-size:0.96rem; }

.portrait-panel{
  background: var(--ink);
  border-radius: var(--radius);
  padding: 44px;
  color: var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 320px;
}
.portrait-panel .script{ color: var(--gold); }

/* ============ CTA banner ============ */
.cta-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
}
.cta-banner .btn{ flex-shrink:0; }

/* ============ Footer ============ */
footer.site{
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0 28px;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(247,246,241,0.14);
}
.footer-brand .brand-name{ color: var(--paper); }
.footer-tag{ font-family: var(--font-script); color: var(--gold); font-size:1.25rem; margin-top:8px; }
.footer-col h4{ color: var(--paper); font-family: var(--font-body); font-size:0.85rem; text-transform:none; letter-spacing:0.02em; margin-bottom:16px; font-weight:600; color:rgba(247,246,241,0.55); }
.footer-col a, .footer-col li{ color: rgba(247,246,241,0.85); font-size:0.95rem; margin-bottom:10px; }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px;
  font-size:0.85rem;
  color: rgba(247,246,241,0.55);
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom a{ color: rgba(247,246,241,0.75); }

/* ============ Contact page ============ */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:start;
}
.contact-card{
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  padding: 36px;
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:0.88rem; font-weight:600; margin-bottom:7px; color: var(--ink-soft); }
.field input, .field textarea, .field select{
  width:100%;
  padding: 12px 14px;
  border: 1px solid rgba(31,59,55,0.25);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.97rem;
  background: var(--paper);
  color: var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline: 2px solid var(--sky);
  outline-offset:1px;
}
.contact-info-item{ display:flex; gap:16px; margin-bottom:26px; }
.contact-info-icon{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--paper-dim);
}
.contact-info-item h4{ font-family: var(--font-body); font-weight:600; font-size:0.95rem; margin-bottom:4px; }
.contact-info-item p{ margin:0; color: var(--ink-soft); font-size:0.95rem; }

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .split, .split.rev{ grid-template-columns:1fr; }
  .split.rev .split-media{ order:0; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .contact-grid{ grid-template-columns:1fr; }
  section{ padding: 60px 0; }
}