:root{
  --green:#154A28;
  --green-2:#0E2A18;
  --ink:#0B1510;
  --bg:#F5F7F6;
  --line:#DCE3DE;
  --citrus:#CBEF3A;

  --radius:22px;
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --max: 1120px;

  /* Change this ONE number to make the logo bigger/smaller */
  --logo-h: 38px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}

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

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

/* =========================================================
   HEADER (fixed glass)
   ========================================================= */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  background: rgba(245,247,246,.28);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border-bottom: 1px solid rgba(21,74,40,.16);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}

.brand img{
  display:block;
  width:auto;
}

/* Logo reveal (single-image wipe)
   We render ONLY the wordmark image and reveal it from left-to-right
   using clip-path so it never “starts” in the middle of the word.
*/

.brand .logo-mask{
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: var(--logo-h);
  width: var(--logo-full-w, 240px); /* JS sets exact width */
  will-change: clip-path;
}

/* Anchor the image to the LEFT so the visible portion is always "RK..." */
.brand img.wordmark{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  display: block;
}

/* JS-enabled initial state: show only the left “RK” portion */
html.js .brand .logo-mask{
  clip-path: inset(0 calc(var(--logo-full-w, 240px) - var(--logo-collapsed-w, 72px)) 0 0);
  transition: clip-path 720ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Reveal state */
html.js.logo-in .brand .logo-mask{
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce){
  html.js .brand .logo-mask{
    transition: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
}

.navlinks{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.navlinks a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:rgba(11,21,16,.88);
}
.navlinks a[aria-current="page"]{
  border-color:var(--line);
  background: rgba(255,255,255,.74);
}

/* Push content below fixed header */
main{
  padding-top: var(--topbar-h, 64px);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  box-shadow:none;
  font-weight:650;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background:var(--citrus);
  border-color:rgba(0,0,0,.08);
  color:rgba(0,0,0,.88);
}
.btn-dark{
  background:var(--green);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}

/* =========================================================
   HERO (home)
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);

  /* pull hero up under fixed header, then add padding so content isn't hidden */
  margin-top: calc(var(--topbar-h, 64px) * -1);
  padding-top: var(--topbar-h, 64px);
}

/* Background image layer */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 80% at 20% 20%, rgba(203,239,58,.18), transparent 60%),
    url("./assets/hero-bg.jpg");
  background-size: cover;
  background-position:center;
  filter: saturate(1.15) contrast(1.08);
  transform: scale(1.02);
  z-index: 0;
}

/* Readability overlay */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(245,247,246,.62),
      rgba(245,247,246,.52) 40%,
      rgba(245,247,246,.68)
    );
  z-index: 1;
  pointer-events:none;
}

/* Subtle grid overlay */
.hero .grid{
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(to right, rgba(21,74,40,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,74,40,.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mix-blend-mode:multiply;
  opacity:.22;
  pointer-events:none;
  z-index: 2;
}

/* Content sits on top */
.hero-inner{
  position:relative;
  z-index: 3;
  padding: 72px 0 54px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(21,74,40,.16);
  background:rgba(255,255,255,.74);
  font-weight:650;
  color:rgba(14,42,24,.90);
}

h1{
  margin:18px 0 10px;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height:1.06;
  letter-spacing:-.02em;
}

.subhead{
  margin: 0 0 18px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(11,21,16,.78);
  max-width: 56ch;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 22px;
  color: rgba(11,21,16,.70);
  font-weight:600;
}

.pill{
  padding:8px 12px;
  border:1px solid rgba(21,74,40,.14);
  border-radius:999px;
  background: rgba(255,255,255,.70);
}

/* Rotator */
.rotator-wrap{
  display:inline-grid;
  align-items:end;
  position:relative;
  overflow:hidden;
  vertical-align:baseline;
  height: 1.25em;
  min-width: 11ch;
  margin-left: .2ch;
  padding-right: .2ch;
}

.rotator{
  display:inline-block;
  font-weight:800;
  color:var(--green-2);
  transform: translateY(110%);
  opacity:0;
  will-change: transform, opacity;
}

.rotator.play{
  animation: riseHoldZip 2400ms linear forwards;
}

@keyframes riseHoldZip{
  0%   { transform: translateY(110%); opacity:0; }
  10%  { transform: translateY(0%);   opacity:1; }
  70%  { transform: translateY(-12%); opacity:1; }
  82%  { transform: translateY(-130%);opacity:0; }
  100% { transform: translateY(110%); opacity:0; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{
  padding: 56px 0;
}
.section-title{
  font-size: clamp(22px, 2.1vw, 34px);
  letter-spacing:-.02em;
  margin:0 0 10px;
}
.section-lead{
  margin:0 0 22px;
  color: rgba(11,21,16,.74);
  max-width: 70ch;
}

.grid2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
}
@media (max-width: 900px){
  .grid2{ grid-template-columns: 1fr; }
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
}

.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  padding: 18px;
  box-shadow: var(--shadow);
}
.card h3{
  margin:0 0 6px;
  font-size: 18px;
}
.card p{
  margin:0;
  color: rgba(11,21,16,.72);
}

.steps{
  display:grid;
  gap: 12px;
}
.step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  padding: 14px 14px;
}
.step .num{
  width:34px;
  height:34px;
  border-radius: 12px;
  background: rgba(203,239,58,.50);
  display:grid;
  place-items:center;
  font-weight:800;
}
.step .txt b{ display:block; }
.step .txt span{ color: rgba(11,21,16,.72); }

.callout{
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(135deg, rgba(21,74,40,.92), rgba(14,42,24,.96));
  color:#fff;
  padding: 26px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.callout h3{ margin:0 0 8px; font-size: 22px; letter-spacing:-.01em; }
.callout p{ margin:0 0 14px; color: rgba(255,255,255,.82); }

/* Forms */
form{ display:grid; gap: 12px; }
.field{ display:grid; gap:6px; }
label{ font-weight:650; color: rgba(11,21,16,.86); }
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--line);
  background:#fff;
  font: inherit;
}
/* Keep checkboxes from stretching full width */
input[type="checkbox"]{
  width:auto;
  height:auto;
  margin:0;
}
textarea{ min-height: 120px; resize: vertical; }

.inline{ display:flex; gap:10px; align-items:center; }
.notice{
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.76);
  color: rgba(11,21,16,.76);
}

.footer{
  padding: 28px 0;
  border-top:1px solid var(--line);
  color: rgba(11,21,16,.66);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}
@media (max-width: 600px){
  .footer-inner{ flex-wrap:wrap; }
}

.small{ font-size: 13px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rotator.play{ animation:none; transform:none; opacity:1; }
  .btn:hover{ transform:none; }
}