/* ==========================================================================
   GROWTH MIND — Website / Portfolio UI kit styles
   Built on ../../colors_and_type.css tokens. Propaganda-poster + woodcut feel.
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--gm-paper);
  color:var(--fg-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* faint film grain over everything */
.gm-grain::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---- KICKER / eyebrow --------------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.kicker::before{content:"";width:30px;height:2.5px;background:var(--accent)}
.kicker.center::after{content:"";width:30px;height:2.5px;background:var(--accent)}

/* ---- BUTTONS ------------------------------------------------------------ */
.btn{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:16px;letter-spacing:.03em;line-height:1;
  padding:14px 24px;border:var(--stroke) solid var(--gm-ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;border-radius:0;background:none;
  transition:transform var(--dur) var(--ease-stamp),
             box-shadow var(--dur) var(--ease-stamp), background var(--dur), color var(--dur);
}
.btn i{font-size:19px}
.btn-primary{background:var(--gm-orange);color:#fff;box-shadow:var(--shadow-block)}
.btn-primary:hover{background:var(--gm-orange-ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gm-ink)}
.btn-dark{background:var(--gm-ink);color:var(--gm-paper);box-shadow:var(--shadow-block-orange)}
.btn-dark:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gm-orange)}
.btn-ghost{background:transparent;color:var(--gm-ink)}
.btn-ghost:hover{background:var(--gm-ink);color:var(--gm-paper)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-on-dark{border-color:var(--gm-paper)}
.btn-on-dark.btn-ghost{color:var(--gm-paper)}
.btn-on-dark.btn-ghost:hover{background:var(--gm-paper);color:var(--gm-ink)}

/* ---- TAGS --------------------------------------------------------------- */
.tag{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.05em;padding:5px 12px;
  border:2px solid var(--gm-ink);background:#fff;color:var(--gm-ink);display:inline-block;
  white-space:nowrap;
}
.tag-solid{background:var(--gm-ink);color:var(--gm-paper)}
.tag-orange{background:var(--gm-orange);color:#fff;border-color:var(--gm-orange)}
.tag-avail{
  display:inline-flex;align-items:center;gap:8px;text-transform:none;
  font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:0;
  background:#fff;
}
.tag-avail::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--gm-sage);box-shadow:0 0 0 3px rgba(109,127,95,.25)}

/* ---- SECTION HEADER ----------------------------------------------------- */
.sec{padding:96px 0}
.sec-head{max-width:680px}
.sec-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,4vw,3.25rem);line-height:.95;color:var(--gm-ink);
  margin:14px 0 0;text-wrap:balance;
}
.sec-sub{font-size:18px;line-height:1.55;color:var(--fg-2);margin:18px 0 0;max-width:560px}

/* ---- CARD --------------------------------------------------------------- */
.card{
  background:#fff;border:var(--stroke) solid var(--gm-ink);
  box-shadow:var(--shadow-block);
}

/* sunburst (CSS, crisp) */
.sunburst{
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(211,84,28,.16) 0deg 2.2deg, transparent 2.2deg 7deg);
}

/* halftone dot field (CSS) */
.halftone{
  background-image:radial-gradient(var(--gm-ink) 1.4px, transparent 1.5px);
  background-size:11px 11px;
}

a{color:inherit}
img{max-width:100%}

/* ---- RESPONSIVE --------------------------------------------------------- */
@media (max-width: 940px) {
  .principles-grid{grid-template-columns:repeat(2,1fr) !important}
  .about-grid{grid-template-columns:1fr !important}
}
@media (max-width: 620px) {
  .principles-grid { grid-template-columns: 1fr !important; }
}