/* ============================================================
   Camino Pragma — Website layout & responsive system
   Builds on colors_and_type.css tokens.
   ============================================================ */
html, body { margin: 0; height: 100%; }
* { box-sizing: border-box; }
#scroll-root { height: 100vh; overflow-y: auto; background: var(--cp-cream); scroll-behavior: smooth; }
img { max-width: 100%; }
button { font-family: var(--font-sans); }

/* ---- Container ---- */
.cp-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; width: 100%; }
.cp-container.narrow { max-width: 780px; }

/* ---- Responsive split (text + media) ---- */
.cp-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.cp-split.even { grid-template-columns: 1fr 1fr; }
.cp-split.media-first > :first-child { order: 0; }

/* ---- Column grids ---- */
.cp-grid { display: grid; gap: 22px; }
.cp-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.cp-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.cp-grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Section paddings ---- */
.cp-sec { padding: 88px 0; }
.cp-sec.tight { padding: 64px 0; }

/* ---- Organic image frame (soft, fluid corners — echoes the brand line) ---- */
.cp-organic { border-radius: 58% 42% 48% 52% / 50% 46% 54% 50%; overflow: hidden; }
.cp-blob { border-radius: 42% 58% 56% 44% / 52% 44% 56% 48%; }

/* ---- Reveal-on-scroll ---- */
.cp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.cp-reveal.in { opacity: 1; transform: none; }

/* ---- Header / mobile nav ---- */
.cp-burger { display: none; }
.cp-mobile-panel { display: none; }

/* ====================  TABLET  ==================== */
@media (max-width: 1000px) {
  .cp-nav-links { display: none !important; }
  .cp-burger { display: inline-flex !important; }
}

/* ====================  ≤ 900px : stack splits  ==================== */
@media (max-width: 900px) {
  .cp-split, .cp-split.even { grid-template-columns: 1fr; gap: 30px; }
  .cp-split.stack-rev > :first-child { order: 2; }
  .cp-grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .cp-grid.c3 { grid-template-columns: repeat(2, 1fr); }
  .cp-sec { padding: 64px 0; }
  .cp-sec.tight { padding: 48px 0; }
  .cp-container { padding: 0 24px; }
}

/* ====================  ≤ 600px : single column  ==================== */
@media (max-width: 600px) {
  .cp-grid.c2, .cp-grid.c3, .cp-grid.c4 { grid-template-columns: 1fr; }
  .cp-container { padding: 0 20px; }
  .cp-sec { padding: 52px 0; }
  .cp-hide-sm { display: none !important; }
  .cp-stats { flex-wrap: wrap; gap: 18px !important; }
  .cp-stats .cp-divider { display: none; }
}

/* footer responsive */
.cp-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 820px) { .cp-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .cp-foot-grid { grid-template-columns: 1fr; gap: 28px; } .cp-foot-bottom { flex-direction: column; gap: 8px; } }

/* form grids */
.cp-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .cp-form-2 { grid-template-columns: 1fr; } }

/* nice focus + select arrow */
.cp-input { font-family: var(--font-sans); font-size: 15px; padding: 13px 15px; border: 1.5px solid var(--cp-line); border-radius: var(--r-md); color: var(--cp-ink); background: #fff; outline: none; transition: .15s; width: 100%; }
.cp-input:focus { border-color: var(--cp-cyan); box-shadow: 0 0 0 3px var(--cp-cyan-100); }
select.cp-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2345606b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; }

/* link reset */
.cp-link { cursor: pointer; text-decoration: none; }