/* ============================================================
   ANDOMIR AUTOMATIONS — Design System
   ============================================================ */

/* ---- Tokens ---- */
:root {
  /* colour */
  --forest:    #1B3A2D;
  --forest-dk: #111F17;
  --forest-lt: #243D30;
  --sage:      #4A7C59;
  --terra:     #C4622D;
  --terra-dk:  #A8441F;
  --cream:     #F5F0E8;
  --peach:     #F2DDD0;
  --charcoal:  #1E1E1E;
  --gold:      #D4A84B;
  --white:     #FFFFFF;

  --line-cream: #E5E0D8;

  /* type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "DM Sans", system-ui, -apple-system, sans-serif;

  /* shadow */
  --sh-rest:  0 2px 12px rgba(27,58,45,.06);
  --sh-hover: 0 20px 60px rgba(27,58,45,.14);
  --sh-terra: 0 8px 24px rgba(196,98,45,.30);
  --sh-modal: 0 40px 100px rgba(30,30,30,.4);

  /* spacing */
  --container: 1200px;
  --pad: 24px;

  --r-input: 4px;
  --r-card: 12px;
  --r-feature: 24px;
  --r-pill: 999px;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Type helpers ---- */
.serif { font-family: var(--serif); }
h1,h2,h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.12; }
h1 { font-weight: 700; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: currentColor;
  transform: rotate(45deg);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--gold); }

.section-head { max-width: 760px; }
.section-head h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.section-head .sub {
  font-size: 18px;
  margin-top: 18px;
  max-width: 620px;
  line-height: 1.6;
}

/* ---- Layout ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
section { padding: 96px 0; position: relative; }

.bg-cream  { background: var(--cream); }
.bg-peach  { background: var(--peach); }
.bg-forest { background: var(--forest); color: var(--cream); }
.bg-forest-dk { background: var(--forest-dk); color: var(--cream); }
.bg-white  { background: var(--white); }

/* weave texture overlay for dark sections (set via JS) */
.weave {
  position: absolute; inset: 0;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.bg-forest .container, .bg-forest-dk .container { position: relative; z-index: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--terra); color: var(--white); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-terra); background: var(--terra-dk); }
.btn-forest { background: var(--forest); color: var(--cream); }
.btn-forest:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,58,45,.32); background: var(--forest-dk); }
.btn-ghost { background: transparent; color: var(--cream); border: 1.5px solid rgba(245,240,232,.42); }
.btn-ghost:hover { border-color: var(--cream); transform: translateY(-2px); background: rgba(245,240,232,.06); }
.btn-wa { background: #25D366; color: #07331a; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.35); }
.btn-lg { padding: 17px 32px; font-size: 16px; }

/* ---- Folk dividers ---- */
.ie-divider {
  height: 30px;
  background-repeat: repeat-x;
  background-position: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.25s cubic-bezier(.7,0,.2,1);
}
/* draw-in only enabled when JS confirms animation; default is fully drawn */
html.reveal-anim .ie-divider:not(.drawn) { clip-path: inset(0 100% 0 0); }

/* ---- Scroll reveal primitives ----
   Content is VISIBLE BY DEFAULT. The hidden pre-animation state only
   applies under html.reveal-anim (set by JS). A broken reveal can never
   blank the page; print / no-JS / reduced-motion all show content. */
.reveal { opacity: 1; transform: none; transition: opacity .65s ease-out, transform .65s cubic-bezier(.2,.7,.3,1); }
html.reveal-anim .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* line-mask text reveal */
.line-mask { overflow: hidden; display: block; }
.line-mask > span { display: block; transform: none; transition: transform .8s cubic-bezier(.16,1,.3,1); }
html.reveal-anim .line-mask:not(.in) > span { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  html.reveal-anim .reveal:not(.in),
  .reveal, .line-mask > span { opacity: 1 !important; transform: none !important; }
  html.reveal-anim .line-mask:not(.in) > span { transform: none !important; }
  .ie-divider, html.reveal-anim .ie-divider:not(.drawn) { clip-path: none !important; transition: none; }
}