/*  body {
            background: linear-gradient(160deg, #23394c 0%, #1b2c3b 55%, #12202b 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: #fff;
        }
        .lp-navbar { padding: 1rem 0; }
        .lp-brand { display: flex; align-items: center; gap: .9rem; }
        .lp-brand img { height: 46px; width: auto; }
        .lp-brand-titles strong { display: block; font-size: 1.05rem; line-height: 1.1; }
        .lp-brand-titles span { font-size: .78rem; color: #cbd5e1; }
        .lp-hero { padding: 4rem 0 2.5rem; }
        .lp-badge { background: rgba(58, 68, 251, .22); border: 1px solid rgba(99, 102, 241, .55); color: #c7d2fe; }
        .lp-hero h1 { font-weight: 800; letter-spacing: -.02em; }
        .lp-hero .lead { color: #cbd5e1; }
        .lp-btn-login { background: #3a44fb; border: none; padding: .7rem 1.6rem; font-weight: 600; }
        .lp-btn-login:hover { background: #2d35d6; }
        .lp-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .10); border-radius: 1rem; }
        .lp-card i { color: #ffd166; }
        .lp-section { padding: 2.5rem 0; }
        .lp-cta { background: #e45c46; border: none; font-weight: 600; padding: .7rem 1.5rem; }
        .lp-footer { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.25rem 0; color: #94a3b8; }
        .lp-instr { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; }
        .lp-instr li { padding-left: .25rem; }
        .lp-instr li i { color: #22c55e; }*/
 
 :root{
    --bg:#f7f5f0;
    --ink:#111111;
    --muted:#c7c7c7;
    --muted1:#888;
    --line:#e0dcd3;
    --accent:#009d8d;   /* deep green */
    --warm:#e8dfcd;
    --white:#ffffff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}

  /* NAV */
  .nav{padding:1rem 0;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:50}
  .nav .container{ margin:auto; display:flex;justify-content:space-between;align-items:center}
  .brand{display:flex;align-items:center;gap:.8rem;font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
    .brand img { width:55%; }
  .brand .mark{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.85rem}
  .nav-right{display:flex;align-items:center;gap:2rem}
  .nav-right a{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500}
  .nav-right a.btn{background:var(--ink);color:#fff;padding:.65rem 1.5rem;border-radius:5px;font-weight:600;transition:.2s}
  .nav-right a.btn:hover{background:var(--accent)}

  /* HERO */
  .hero{padding:5rem 0 5rem;border-bottom:1px solid var(--line); background:url(../imgs/32582886_rrt1.jpg); background-size: cover; }
  .hero .container{ margin:auto; }
  .hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:5rem;align-items:center}
  .eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:1.5rem;display:flex;align-items:center;gap:.8rem}
  .eyebrow::before{content:"";width:30px;height:1px;background:var(--accent)}
  .hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1;letter-spacing:-.03em;
  margin-bottom:1.8rem; color:#fff; }
  .hero h1 em{font-style:italic;color:var(--accent);font-weight:400}
  .hero p{font-size:1.1rem;color:var(--muted);max-width:520px;margin-bottom:2.5rem;line-height:1.7}
  
  /* .hero-side {border-left:1px solid var(--line);padding-left:2.5rem;padding-bottom:.5rem} */
   .hero-side img { width: 100%; height: 430px; object-fit:cover; border-radius:20px; }
  .hero-side .stat{margin-bottom:1.8rem}
  .hero-side .stat .num{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:600;color:var(--ink);line-height:1}
  .hero-side .stat .lbl{font-size:.82rem;color:var(--muted);margin-top:.3rem;text-transform:uppercase;letter-spacing:.08em}

  .cta-row{display:flex;gap:1rem;flex-wrap:wrap}
  .btn-dark{background:var(--accent);color:#fff;padding:1rem 2rem;border-radius:2px;text-decoration:none;font-weight:600;
  font-size:.95rem;display:inline-flex;align-items:center;gap:.6rem;transition:.2s;border:1px solid var(--accent)}
  .btn-dark:hover{background:var(--white);border-color:var(--white); color:var(--accent); }
  .btn-outline{background:transparent;color:var(--white);padding:1rem 2rem;border-radius:2px;text-decoration:none;font-weight:600;
  font-size:.95rem;display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--white);transition:.2s}
  .btn-outline:hover{  border:1px solid var(--accent); color:var(--accent); }

  /* SECTIONS */
  .section{padding:6rem 0}
  .section .container{ margin:auto; }
  .section-head{display:flex;justify-content:space-between;align-items:flex-end; gap:2rem;flex-wrap:wrap; padding-bottom:2rem}
  .section-head h2{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;max-width:600px}
  .section-head p{color:var(--muted1);font-size:1rem;max-width:340px;line-height:1.6}

  /* EDITORIAL CARDS */
  /* .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  .vcard{padding:2.5rem 2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.25s;position:relative}
  .vcard:nth-child(3n){border-right:none}
  .vcard:hover{background:var(--warm)}
  .vcard .num{font-family:'Fraunces',serif;font-size:.85rem;color:var(--accent);font-weight:700;letter-spacing:.08em;margin-bottom:1.5rem}
  .vcard h3{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:600;margin-bottom:.8rem;letter-spacing:-.02em}
  .vcard p{font-size:.93rem;color:var(--muted);line-height:1.65} */

  /* INSTRUCTIONS */
  /* .instr{border:1px solid var(--ink);border-radius:0;padding:4rem;background:#fff;display:grid;grid-template-columns:1fr 2fr;gap:4rem}
  .instr h3{font-family:'Fraunces',serif;font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
  .instr h3 span{display:block;color:var(--accent);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-family:'Inter';font-weight:700;margin-bottom:1rem}
  .instr-list{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem}
  .instr-list .item{display:flex;gap:.9rem;font-size:.93rem;color:#333;line-height:1.6;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
  .instr-list .item i{color:var(--accent);margin-top:.25rem;font-size:.9rem}
  .instr-list .item strong{color:var(--ink);font-weight:700}
  .instr-cta{grid-column:1/-1;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}
  .instr-cta p{font-family:'Fraunces',serif;font-size:1.2rem;font-style:italic;color:var(--muted)} */

  /* FOOTER */
  .footer{padding:2.5rem 0;border-top:1px solid var(--line);background:var(--bg)}
  .footer .container{ margin:auto; display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;
    color:var(--muted1)}
  .footer .brand-small{font-family:'Fraunces',serif;font-weight:700;color:var(--ink);font-size:1rem}
  
  .ticker{  border-bottom:1px solid var(--line);padding:1rem 0;overflow:hidden; }
  .ticker-track{display:flex;gap:3rem;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--grey);white-space:nowrap;animation:scroll 30s linear infinite;text-transform:uppercase;letter-spacing:.1em}
  .ticker-track span{display:flex;align-items:center;gap:.6rem}
  .ticker-track span i{color:var(--lime)}

  @keyframes scroll{to{transform:translateX(-50%)}}
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:3rem}
    .hero-side{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:2rem;display:flex;gap:2.5rem;flex-wrap:wrap}
    .hero-side .stat{margin-bottom:0}
    .values-grid{grid-template-columns:1fr 1fr}
    .vcard:nth-child(3n){border-right:1px solid var(--line)}
    .vcard:nth-child(2n){border-right:none}
    .instr{grid-template-columns:1fr;padding:2.5rem;gap:2rem}
    .instr-list{grid-template-columns:1fr}
  }
  @media(max-width:600px){
    .values-grid{grid-template-columns:1fr}
    .vcard{border-right:none !important}
    .section-head{flex-direction:column;align-items:flex-start}
    .hero{padding:4rem 0 3rem}
    .nav-right a:not(.btn){display:none}
  }

   .section {
      position: relative;
      width: 100%;
      padding: 5rem 1.5rem;
      
      
     }

   

     

    /* ---------- Values grid ---------- */
    .values-grid {
      display: grid;
      /* grid-template-columns: repeat(3, 1fr); */
      gap: 1.75rem;
    }

    /* ---------- Value card ---------- */
    .vcard {
      position: sticky; top: 120px;
      background: #ffffff;
      border: 1px solid #e7edf3;
      border-radius: 1.5rem;
      padding: 2rem 1.75rem; margin: 0px 0px;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 4px 12px rgba(11, 46, 74, 0.03);
      display: flex;
      
      overflow: hidden; 
    }

    .vcardleft { width: 45%; }
     .vcardleft img { width: 100%; height: 350px; object-fit: cover; border-radius: 10px; }
     .vcardright { width: 55%; padding: 20px 50px; height: 100%; display: flex;justify-content: center;  align-items: normal; flex-flow: column; }

    /* top accent line */
    .vcard::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background:#009d8d;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }

    .vcard:hover {
      transform: translateY(-6px);
      border-color: #009d8d;
      box-shadow: 0 24px 40px -12px rgba(20, 60, 100, 0.18);
    }

    .vcard:hover::after {
      transform: scaleX(1);
    }

    /* card header: icon + number */
    .vcard-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    /* icon badge (main visual) */
    .vcard-icon {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      color: #ffffff;
      background:#009d8d;
      box-shadow: 0 8px 18px -6px rgba(30, 111, 159, 0.5);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      flex-shrink: 0;
    }

    .vcard:hover .vcard-icon {
      transform: scale(1.06) rotate(-3deg);
      box-shadow: 0 12px 22px -6px rgba(30, 111, 159, 0.6);
    }

    /* number badge */
    .vcard-num {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #8ba3b8;
      transition: color 0.3s ease;
    }

    .vcard:hover .vcard-num {
      color: #1e6f9f;
    }

    .vcard h3 {
      font-size: 1.35rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #0b2e4a;
      margin-bottom: 0.65rem;
      line-height: 1.3;
    }

    .vcard p {
      font-size: 0.95rem;
      line-height: 1.65;
      color: #3a4c5c;
      
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1024px) {
      .values-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
      .section-head h2 { font-size: 2.15rem; }
      .section { padding: 4rem 1.5rem; }
    }

    @media (max-width: 640px) {
      .section { padding: 3rem 1rem; }
      .values-grid { grid-template-columns: 1fr; gap: 1.25rem; }
      .section-head { margin-bottom: 2.5rem; }
      .section-head h2 { font-size: 1.75rem; }
      .section-head p { font-size: 1rem; }
      .vcard { padding: 1.75rem 1.35rem; flex-flow: column; }
      .vcard-icon { width: 3rem; height: 3rem; font-size: 1.2rem; }
      .vcard h3 { font-size: 1.2rem; }
       .vcardleft { width: 100%; }  
       .vcardleft img { height: 200px; }
   
      .vcardright { width: 100%; padding: 20px; }
    }


     /* ============================================================
       Section wrapper
       ============================================================ */
    .instr {
      position: relative;
     
      margin: 0 auto;
      background: var(--paper);
     
      padding-bottom: 3rem ;
    }

    
 

    .instr-inner { position: relative; z-index: 1; }

    /* ============================================================
       Header — masthead style
       ============================================================ */
    .instr-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      padding-bottom: 0rem;
      
      margin-bottom: 3rem;
    }

    .instr-head-left {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .instr-mark {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      border: 1.5px solid var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Fraunces', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--accent);
      flex-shrink: 0;
    }

    .instr-head h3 {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 2.6rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.05;
      color: var(--ink);
    }

    .instr-head h3 em {
      font-style: italic;
      font-weight: 500;
      color: var(--accent);
    }

    .instr-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.22em;
      color: var(--ink-soft);
      white-space: nowrap;
      padding-bottom: 0.35rem;
    }

    .instr-kicker::before {
      content: '';
      width: 1.75rem;
      height: 1.5px;
      background: var(--accent);
    }

    /* ============================================================
       Main grid
       ============================================================ */
    .instr-layout {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 4.5rem;
    }

    /* ============================================================
       Left: vertical timeline checklist
       ============================================================ */
    
       :root {
       
      --accent3: #009d8d;    /* warm terracotta */
      
      --gold: #ffb200;
    }
       .instr-list {
      position: relative;
      
      counter-reset: step; gap: 20px; display: flex;    flex-flow: column;
    }

     

    .item {
      display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1rem;
    
    border: 1px solid #e0dcd3;
    border-radius: 12px;
    transition: all 0.25s ease;
    cursor: default;
    }

    .item:last-child { padding-bottom: 0.5rem; }

     
    .item-icon {
      flex-shrink: 0;
      width: 4rem;
      height: 4rem;
      border-radius: 10px;
       
      background: var(--accent);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      margin-top: 0.1rem;
    }

    .item:hover .item-icon {
      background: var(--ink);
      
       
      transform: rotate(-4deg);
    }

    .item-body { flex: 1; }

    .item-body span {
      font-size: 1rem;
      color: var(--ink-soft);
      line-height: 1.6;
      display: block;
    }

    .item-body strong {
      display: block;
      color: var(--ink);
      font-weight: 700;
      font-family: 'Fraunces', serif;
      font-size: 1.10rem;
      letter-spacing: -0.01em;
      margin-right: 0.15rem;
    }

    /* ============================================================
       Right: sticky editorial note + CTA
       ============================================================ */
    .instr-aside {
      position: sticky;
      top: 130px;
      align-self: start;
    }

    .aside-card {
      background: var(--ink);  
      color: var(--paper);
      border-radius: 4px;
      padding: 2.5rem 2rem;
      position: relative;
      overflow: hidden;
    }

    /* terracotta corner accent */
    .aside-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3.5rem;
      height: 3.5rem;
      background: var(--accent);
      clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    /* faint serif quote mark */
    .aside-card::after {
      content: '\201C';
      position: absolute;
      bottom: -3rem;
      right: 1rem;
      font-family: 'Fraunces', Georgia, serif;
      font-size: 11rem;
      line-height: 1;
      color: rgba(255, 255, 255, 0.07);
      pointer-events: none;
    }

    .aside-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--gold);
      margin-bottom: 1.75rem;
    }

    .aside-eyebrow i { font-size: 0.7rem; }

    .aside-quote {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.4rem;
      font-weight: 500;
      font-style: italic;
      line-height: 1.45;
      color: #f1ece3;
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
    }

    .aside-quote em {
      color: var(--gold);
      font-style: italic;
    }

    .aside-rule {
      width: 2.25rem;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      margin-bottom: 1.75rem;
    }

    /* ============ outlined button ============ */
    .aside-card .btn-dark {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      padding: 1rem 1.35rem;
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, 0.658);
      border-radius: 4px;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .aside-card .btn-dark i {
      transition: transform 0.3s ease;
      font-size: 0.8rem;
    }

    .aside-card .btn-dark:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .aside-card .btn-dark:hover i { transform: translateX(5px); }

    /* small footnote under the card */
    .aside-foot {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 1.25rem;
      font-size: 0.78rem;
      color: var(--ink-soft);
      padding-left: 0.25rem;
    }

    .aside-foot i {
      color: var(--accent-2);
      font-size: 0.85rem;
    }

    /* ============================================================
       Responsive
       ============================================================ */
    @media (max-width: 1024px) {
      .instr { padding: 3rem 2rem; }
      .instr::before { display: none; }
      .instr-layout { grid-template-columns: 1fr; gap: 3rem; }
      .instr-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .instr-head h3 { font-size: 2.15rem; }
      .instr-aside { position: static; }
    }

    @media (max-width: 640px) {
      body {  }
      .instr { padding: 2.25rem 1.25rem; border-top-width: 2px; border-bottom-width: 2px; }
      .instr::after { font-size: 3.5rem; top: 0.5rem; right: 1rem; }
      .instr-head h3 { font-size: 1.75rem; }
      .instr-mark { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
      .instr-list {  }
      .instr-list::before { left: 0.95rem; }
      .item::before { left: -2.75rem; width: 2rem; height: 2rem; font-size: 0.7rem; }
      .item-icon { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
      .item-body span { font-size: 0.92rem; }
      .item-body strong { font-size: 0.98rem; }
      .aside-card { padding: 2rem 1.5rem; }
      .aside-quote { font-size: 1.15rem; }

    }