@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --clr-bg: #f5f4f0;
  --clr-bg2: #eeecea;
  --clr-surface: #faf9f7;
  --clr-surface2: #ffffff;
  --clr-accent: #5a6f52;
  --clr-accent-lt: #7a9470;
  --clr-accent-dk: #3d4f38;
  --clr-accent-tint: #e8ede6;
  --clr-text: #1e2118;
  --clr-text2: #4a4e42;
  --clr-text3: #7a7e72;
  --clr-border: #dddbd5;
  --clr-border2: #c8c5be;
  --clr-amber: #c47c2a;
  --clr-amber-tint: #fdf3e5;

  --ff-head: 'DM Serif Display', Georgia, serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;

  --sz-xs: 0.75rem;
  --sz-sm: 0.875rem;
  --sz-base: 1rem;
  --sz-md: 1.125rem;
  --sz-lg: 1.25rem;
  --sz-xl: 1.5rem;
  --sz-2xl: 2rem;
  --sz-3xl: 2.75rem;
  --sz-4xl: 3.5rem;
  --sz-5xl: clamp(3.5rem, 8vw, 7rem);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-full: 999px;

  --sh-sm: 0 1px 3px rgba(30,33,24,.06), 0 2px 8px rgba(30,33,24,.04);
  --sh-md: 0 2px 8px rgba(30,33,24,.07), 0 8px 24px rgba(30,33,24,.06), 0 1px 2px rgba(30,33,24,.04);
  --sh-lg: 0 4px 16px rgba(30,33,24,.07), 0 16px 48px rgba(30,33,24,.08), 0 2px 4px rgba(30,33,24,.04);
  --sh-xl: 0 8px 32px rgba(30,33,24,.08), 0 32px 80px rgba(30,33,24,.1), 0 2px 6px rgba(30,33,24,.05);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--ff-body);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.65;
  font-size: var(--sz-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); }
ul { list-style: none; }
address { font-style: normal; }

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


.btn-pri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-accent);
  color: #fff;
  font-family: var(--ff-body);
  font-size: var(--sz-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(90,111,82,.25), 0 1px 2px rgba(90,111,82,.15);

  &:hover {
    background: var(--clr-accent-dk);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(90,111,82,.3), 0 2px 4px rgba(90,111,82,.2);
  }
  &:active { transform: translateY(0); }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--clr-surface);
  font-family: var(--ff-body);
  font-size: var(--sz-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 26px;
  border-radius: var(--r-full);
  border: 2px solid rgba(250,249,247,.4);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);

  &:hover {
    background: rgba(250,249,247,.12);
    border-color: rgba(250,249,247,.7);
    transform: translateY(-1px);
  }
}

.btn-txt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clr-accent);
  font-size: var(--sz-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: gap var(--transition), color var(--transition);

  &:hover {
    color: var(--clr-accent-dk);
    gap: 10px;
  }
}

.btn-lg { padding: 15px 36px; font-size: var(--sz-base); }
.btn-full { width: 100%; justify-content: center; }


.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
  padding: 0;

  & .hdr-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 72px;
    transition: height var(--transition);
  }

  & .hdr-logo {
    flex-shrink: 0;
    opacity: 1;
    transition: opacity var(--transition);
    &:hover { opacity: 0.8; }
  }

  & .hdr-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;

    & a {
      font-size: var(--sz-sm);
      font-weight: 500;
      color: rgba(250,249,247,.85);
      padding: 8px 14px;
      border-radius: var(--r-md);
      transition: color var(--transition), background var(--transition);

      &:hover { color: #fff; background: rgba(255,255,255,.1); }
      &.active { color: #fff; font-weight: 700; }
    }
  }

  & .hdr-cta {
    margin-left: 8px;
    flex-shrink: 0;
  }

  & .hdr-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;

    & span {
      display: block;
      width: 24px;
      height: 2px;
      background: rgba(250,249,247,.9);
      border-radius: 2px;
      transition: background var(--transition);
    }
  }

  &.hdr-solid {
    background: var(--clr-surface);
    box-shadow: var(--sh-md);

    & .hdr-inner { height: 64px; }

    & .hdr-nav a {
      color: var(--clr-text2);
      &:hover { color: var(--clr-text); background: var(--clr-bg); }
      &.active { color: var(--clr-accent); }
    }

    & .hdr-burger span { background: var(--clr-text); }
  }
}


.mob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,33,24,.45);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
  backdrop-filter: blur(2px);

  &.open {
    opacity: 1;
    pointer-events: all;
  }
}

.mob-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  max-width: 320px;
  background: var(--clr-surface);
  z-index: 1001;
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  padding: 80px 32px 40px;
  box-shadow: var(--sh-xl);

  &.open { transform: translateX(0); }

  & .mob-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--clr-bg2);
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--clr-text);
    transition: background var(--transition);
    &:hover { background: var(--clr-border); }
  }

  & .mob-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;

    & a {
      font-size: var(--sz-lg);
      font-weight: 500;
      color: var(--clr-text);
      padding: 12px 0;
      border-bottom: 1px solid var(--clr-border);
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity var(--transition), transform var(--transition), color var(--transition);
      transition-delay: calc(var(--i) * 0.06s);

      &:hover { color: var(--clr-accent); }
    }
  }

  &.open .mob-nav a {
    opacity: 1;
    transform: translateX(0);
  }

  & .mob-cta {
    margin-top: 32px;
    text-align: center;
    justify-content: center;
  }
}


.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  & .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    & .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  & .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(20,24,16,.78) 0%,
      rgba(30,40,22,.62) 50%,
      rgba(10,18,8,.55) 100%
    );
  }

  & .hero-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    & .hero-circle {
      position: absolute;
      border-radius: 50%;
      opacity: 0.08;

      &.c1 {
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, #a8c49e, transparent 70%);
        top: -100px;
        right: -100px;
      }
      &.c2 {
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, #c8a86e, transparent 70%);
        bottom: -50px;
        left: 10%;
      }
    }
  }

  & .hero-cnt {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 80px;

    & .hero-eyebrow {
      font-size: var(--sz-xs);
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(168,196,158,.9);
      margin-bottom: 20px;
    }

    & .hero-h1 {
      font-family: var(--ff-head);
      font-size: var(--sz-5xl);
      color: var(--clr-surface);
      line-height: 0.95;
      letter-spacing: -0.02em;
      margin-bottom: 28px;
    }

    & .hero-sub {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: rgba(250,249,247,.78);
      max-width: 540px;
      margin: 0 auto 40px;
      line-height: 1.7;
    }

    & .hero-actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  & .hero-scroll {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(250,249,247,.5);
    font-size: var(--sz-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: scrollBob 2.4s ease-in-out infinite;
  }
}

@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}


.sec {
  padding: 96px 0;
  position: relative;

  & .sec-hd {
    margin-bottom: 64px;
    &.centered { text-align: center; }
  }

  & .sec-label {
    display: inline-block;
    font-size: var(--sz-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-accent);
    background: var(--clr-accent-tint);
    padding: 5px 14px;
    border-radius: var(--r-full);
    margin-bottom: 16px;
  }

  & .sec-title {
    font-family: var(--ff-head);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: var(--clr-text);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
  }

  & .sec-sub {
    font-size: var(--sz-md);
    color: var(--clr-text3);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
  }
}


.crd {
  background: var(--clr-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--sh-sm);
  transition: transform var(--transition), box-shadow var(--transition);

  &:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
  }
}


.intro-strip {
  padding: 64px 0;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);

  & .intro-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;

    & .intro-tag {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--sz-xs);
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--clr-accent);
      white-space: nowrap;
      flex-shrink: 0;
    }

    & .intro-lead {
      font-size: clamp(1rem, 1.8vw, 1.2rem);
      color: var(--clr-text2);
      line-height: 1.7;
      max-width: 760px;
    }
  }
}


.pillars-sec {
  background: var(--clr-bg2);
  clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
  padding: 130px 0;

  & .sec-angled-top,
  & .sec-angled-bot { display: none; }

  & .pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    & .pillar-crd {
      padding: 36px 28px;
      background: var(--clr-surface);

      & .crd-ico {
        width: 52px;
        height: 52px;
        background: var(--clr-accent-tint);
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--clr-accent);
        margin-bottom: 20px;
        transition: background var(--transition), color var(--transition);
      }

      & .crd-title {
        font-family: var(--ff-head);
        font-size: var(--sz-xl);
        color: var(--clr-text);
        margin-bottom: 12px;
        line-height: 1.25;
      }

      & .crd-txt {
        font-size: var(--sz-sm);
        color: var(--clr-text2);
        line-height: 1.7;
      }

      &:hover .crd-ico {
        background: var(--clr-accent);
        color: #fff;
      }
    }
  }
}


.img-break-sec {
  background: var(--clr-bg);

  & .img-break-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;

    & .img-break-img {
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--sh-xl);
      aspect-ratio: 4/5;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
      }

      &:hover img { transform: scale(1.03); }
    }

    & .img-break-cnt {
      & .sec-label { margin-bottom: 16px; }

      & .sec-title {
        font-size: clamp(1.6rem, 2.8vw, 2.4rem);
        margin-bottom: 24px;
      }

      & p {
        font-size: var(--sz-md);
        color: var(--clr-text2);
        line-height: 1.75;
        margin-bottom: 20px;
      }

      & .btn-pri { margin-top: 12px; }
    }
  }
}


.timeline-sec {
  background: var(--clr-surface);

  & .timeline {
    position: relative;
    padding-left: 48px;
    margin-top: 16px;

    &::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: linear-gradient(to bottom, var(--clr-accent), var(--clr-accent-lt), var(--clr-border));
    }

    & .tl-item {
      position: relative;
      margin-bottom: 48px;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 24px;
      align-items: start;

      &:last-child { margin-bottom: 0; }

      & .tl-dot {
        position: absolute;
        left: -41px;
        top: 4px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--clr-accent);
        border: 3px solid var(--clr-surface);
        box-shadow: 0 0 0 2px var(--clr-accent);
        z-index: 1;
      }

      & .tl-year {
        font-family: var(--ff-head);
        font-size: var(--sz-xl);
        color: var(--clr-accent);
        padding-top: 2px;
      }

      & .tl-crd {
        background: var(--clr-bg);
        border: 1px solid var(--clr-border);
        border-radius: var(--r-lg);
        padding: 24px 28px;
        box-shadow: var(--sh-sm);
        transition: box-shadow var(--transition), transform var(--transition);

        &:hover {
          box-shadow: var(--sh-md);
          transform: translateX(4px);
        }

        & h4 {
          font-family: var(--ff-head);
          font-size: var(--sz-lg);
          color: var(--clr-text);
          margin-bottom: 8px;
        }

        & p {
          font-size: var(--sz-sm);
          color: var(--clr-text2);
          line-height: 1.7;
        }
      }
    }
  }
}


.workshops-prev-sec {
  background: var(--clr-bg2);
  clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 calc(100% - 40px));
  padding: 130px 0;

  & .sec-angled-top-inv,
  & .sec-angled-bot-inv { display: none; }

  & .workshops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;

    & .wk-crd {
      overflow: hidden;

      & .wk-img {
        aspect-ratio: 16/9;
        overflow: hidden;

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
      }

      &:hover .wk-img img { transform: scale(1.05); }

      & .wk-body {
        padding: 28px;

        & .wk-tag {
          display: inline-block;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--clr-accent);
          background: var(--clr-accent-tint);
          padding: 3px 10px;
          border-radius: var(--r-full);
          margin-bottom: 12px;
        }

        & h3 {
          font-family: var(--ff-head);
          font-size: var(--sz-xl);
          color: var(--clr-text);
          line-height: 1.25;
          margin-bottom: 10px;
        }

        & p {
          font-size: var(--sz-sm);
          color: var(--clr-text2);
          line-height: 1.7;
          margin-bottom: 20px;
        }
      }
    }
  }

  & .centered-cta { text-align: center; }
}


.how-sec {
  background: var(--clr-bg);

  & .how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;

    & .how-step {
      & .how-num {
        font-family: var(--ff-head);
        font-size: 3.5rem;
        color: var(--clr-border2);
        line-height: 1;
        margin-bottom: 16px;
        transition: color var(--transition);
      }

      & h4 {
        font-family: var(--ff-head);
        font-size: var(--sz-lg);
        color: var(--clr-text);
        margin-bottom: 10px;
        line-height: 1.3;
      }

      & p {
        font-size: var(--sz-sm);
        color: var(--clr-text2);
        line-height: 1.7;
      }

      &:hover .how-num { color: var(--clr-accent-lt); }
    }
  }
}


.min-cta-sec {
  position: relative;
  overflow: hidden;
  background: var(--clr-accent-dk);
  padding: 120px 0;

  & .min-cta-bg {
    position: absolute;
    inset: -40px;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(168,196,158,.15) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 30%, rgba(196,124,42,.1) 0%, transparent 50%);
    pointer-events: none;
  }

  & .min-cta-wrap {
    position: relative;
    z-index: 1;
    text-align: center;

    & .min-cta-h2 {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 4vw, 3.2rem);
      color: var(--clr-surface);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    & .min-cta-p {
      font-size: var(--sz-md);
      color: rgba(250,249,247,.72);
      margin-bottom: 40px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}


.pg-hero {
  background: var(--clr-surface);
  padding: 140px 0 80px;
  border-bottom: 1px solid var(--clr-border);

  & .pg-hero-wrap {
    max-width: 760px;

    & .sec-label { margin-bottom: 16px; }

    & h1 {
      font-family: var(--ff-head);
      font-size: clamp(2.2rem, 4.5vw, 3.8rem);
      color: var(--clr-text);
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }

    & p {
      font-size: var(--sz-md);
      color: var(--clr-text2);
      line-height: 1.75;
    }
  }
}


.approach-intro-sec {
  & .approach-intro-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;

    & .approach-intro-img {
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: var(--sh-xl);
      aspect-ratio: 3/4;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .approach-intro-txt {
      & h2 {
        font-family: var(--ff-head);
        font-size: clamp(1.7rem, 3vw, 2.5rem);
        color: var(--clr-text);
        line-height: 1.2;
        margin-bottom: 20px;
      }

      & p {
        font-size: var(--sz-md);
        color: var(--clr-text2);
        line-height: 1.75;
        margin-bottom: 18px;
      }
    }
  }
}

.principles-sec {
  background: var(--clr-bg2);
  clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
  padding: 130px 0;

  & .principles-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 840px;
    margin: 0 auto;

    & .principle-item {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 32px;
      padding: 36px 0;
      border-bottom: 1px solid var(--clr-border);
      align-items: start;
      transition: background var(--transition);

      &:last-child { border-bottom: none; }

      & .principle-num {
        font-family: var(--ff-head);
        font-size: 2.5rem;
        color: var(--clr-border2);
        line-height: 1;
        padding-top: 4px;
        transition: color var(--transition);
      }

      & .principle-body {
        & h3 {
          font-family: var(--ff-head);
          font-size: var(--sz-xl);
          color: var(--clr-text);
          margin-bottom: 10px;
        }
        & p {
          font-size: var(--sz-base);
          color: var(--clr-text2);
          line-height: 1.75;
        }
      }

      &:hover .principle-num { color: var(--clr-accent-lt); }
    }
  }
}

.content-areas-sec {
  & .content-areas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;

    & .ca-crd {
      overflow: hidden;

      & img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
      }

      & .ca-body {
        padding: 28px;

        & h3 {
          font-family: var(--ff-head);
          font-size: var(--sz-xl);
          color: var(--clr-text);
          margin-bottom: 12px;
        }

        & p {
          font-size: var(--sz-sm);
          color: var(--clr-text2);
          line-height: 1.75;
          margin-bottom: 12px;
          &:last-child { margin-bottom: 0; }
        }
      }

      & .ca-body-full { padding: 32px; }
    }
  }
}


.lib-sec {
  background: var(--clr-bg);

  &.lib-alt { background: var(--clr-surface); }

  & .lib-cat-hd {
    margin-bottom: 48px;

    & .lib-cat-tag {
      display: inline-block;
      font-size: var(--sz-xs);
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--clr-accent);
      background: var(--clr-accent-tint);
      padding: 5px 14px;
      border-radius: var(--r-full);
      margin-bottom: 16px;
    }

    & h2 {
      font-family: var(--ff-head);
      font-size: clamp(1.7rem, 3vw, 2.5rem);
      color: var(--clr-text);
      line-height: 1.15;
      margin-bottom: 12px;
    }

    & p {
      font-size: var(--sz-md);
      color: var(--clr-text2);
      max-width: 620px;
      line-height: 1.7;
    }
  }

  & .lib-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;

    & .lib-crd {
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      & .lib-crd-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      & .lib-tag {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--clr-accent);
        background: var(--clr-accent-tint);
        padding: 3px 10px;
        border-radius: var(--r-full);
      }

      & .lib-tag-perf { color: var(--clr-amber); background: var(--clr-amber-tint); }
      & .lib-tag-rec { color: #5563a0; background: #eaecf5; }
      & .lib-tag-chrono { color: #8a5a9a; background: #f2eaf5; }

      & .lib-dur {
        font-size: var(--sz-xs);
        color: var(--clr-text3);
        display: flex;
        align-items: center;
        gap: 5px;
      }

      & h3 {
        font-family: var(--ff-head);
        font-size: var(--sz-xl);
        color: var(--clr-text);
        line-height: 1.25;
      }

      & p {
        font-size: var(--sz-sm);
        color: var(--clr-text2);
        line-height: 1.7;
      }

      & .lib-topics {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;

        & li {
          font-size: var(--sz-xs);
          color: var(--clr-text3);
          padding-left: 14px;
          position: relative;
          line-height: 1.5;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--clr-accent-lt);
          }
        }
      }

      & .btn-pri { align-self: flex-start; margin-top: auto; }
    }
  }
}


.pg-hero-guide {
  background: linear-gradient(135deg, var(--clr-accent-dk) 0%, var(--clr-accent) 100%);

  & .pg-hero-wrap {
    & .sec-label {
      color: rgba(168,196,158,.9);
      background: rgba(168,196,158,.15);
    }

    & h1 { color: var(--clr-surface); }
    & p { color: rgba(250,249,247,.78); }
  }
}

.guide-intro-sec {
  background: var(--clr-surface);
  padding: 64px 0;
  border-bottom: 1px solid var(--clr-border);

  & .guide-intro-wrap {
    max-width: 760px;

    & .guide-lead {
      font-size: clamp(1.05rem, 1.8vw, 1.2rem);
      color: var(--clr-text);
      line-height: 1.8;
      margin-bottom: 16px;
    }

    & .guide-sub {
      font-size: var(--sz-base);
      color: var(--clr-text3);
      line-height: 1.7;
    }
  }
}

.guide-sec {
  background: var(--clr-bg);
  padding: 80px 0;

  & .guide-wrap {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 60px;
    align-items: start;

    & .guide-sidebar {
      & .guide-nav-sticky {
        position: sticky;
        top: 90px;
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: var(--r-lg);
        padding: 24px;
        box-shadow: var(--sh-sm);

        & .guide-nav-label {
          font-size: var(--sz-xs);
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--clr-text3);
          margin-bottom: 16px;
        }

        & .guide-nav-link {
          display: block;
          font-size: var(--sz-sm);
          color: var(--clr-text2);
          padding: 8px 12px;
          border-radius: var(--r-sm);
          transition: background var(--transition), color var(--transition);
          margin-bottom: 2px;

          &:hover {
            background: var(--clr-accent-tint);
            color: var(--clr-accent);
          }
        }
      }
    }

    & .guide-content {
      & .guide-entry {
        background: var(--clr-surface);
        border: 1px solid var(--clr-border);
        border-radius: var(--r-xl);
        padding: 40px;
        margin-bottom: 28px;
        box-shadow: var(--sh-sm);
        scroll-margin-top: 100px;

        & .guide-entry-hd {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 20px;

          & .guide-ico {
            width: 48px;
            height: 48px;
            background: var(--clr-accent-tint);
            border-radius: var(--r-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--clr-accent);
            flex-shrink: 0;
          }

          & h2 {
            font-family: var(--ff-head);
            font-size: clamp(1.3rem, 2vw, 1.8rem);
            color: var(--clr-text);
            line-height: 1.2;
          }
        }

        & p {
          font-size: var(--sz-base);
          color: var(--clr-text2);
          line-height: 1.8;
          margin-bottom: 16px;
          &:last-child { margin-bottom: 0; }
        }

        & em { font-style: italic; color: var(--clr-text); }

        & .guide-key-point {
          display: flex;
          gap: 14px;
          align-items: flex-start;
          background: var(--clr-accent-tint);
          border-left: 3px solid var(--clr-accent);
          border-radius: 0 var(--r-md) var(--r-md) 0;
          padding: 16px 20px;
          margin-top: 20px;

          & i {
            color: var(--clr-accent);
            font-size: 18px;
            flex-shrink: 0;
            margin-top: 2px;
          }

          & p {
            margin-bottom: 0;
            font-size: var(--sz-sm);
            color: var(--clr-accent-dk);
          }
        }
      }
    }
  }
}


.contact-sec {
  & .contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;

    & .contact-info {
      & h2 {
        font-family: var(--ff-head);
        font-size: var(--sz-2xl);
        color: var(--clr-text);
        margin-bottom: 32px;
      }

      & .contact-detail {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 28px;

        & .contact-ico {
          width: 44px;
          height: 44px;
          background: var(--clr-accent-tint);
          border-radius: var(--r-md);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--clr-accent);
          font-size: 18px;
          flex-shrink: 0;
        }

        & strong {
          display: block;
          font-size: var(--sz-sm);
          font-weight: 700;
          color: var(--clr-text);
          margin-bottom: 4px;
        }

        & p, & a {
          font-size: var(--sz-sm);
          color: var(--clr-text2);
          line-height: 1.6;
        }

        & a:hover { color: var(--clr-accent); }
      }

      & .contact-map {
        margin-top: 32px;
        border-radius: var(--r-lg);
        overflow: hidden;
        border: 1px solid var(--clr-border);
        box-shadow: var(--sh-sm);
      }
    }

    & .contact-form-wrap {
      & h2 {
        font-family: var(--ff-head);
        font-size: var(--sz-2xl);
        color: var(--clr-text);
        margin-bottom: 32px;
      }
    }
  }
}


.frm {
  display: flex;
  flex-direction: column;
  gap: 20px;

  & .frm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    & label {
      font-size: var(--sz-sm);
      font-weight: 700;
      color: var(--clr-text);
      letter-spacing: 0.02em;
    }

    & input, & textarea {
      font-family: var(--ff-body);
      font-size: var(--sz-base);
      color: var(--clr-text);
      background: var(--clr-surface);
      border: 1.5px solid var(--clr-border);
      border-radius: var(--r-md);
      padding: 12px 16px;
      transition: border-color var(--transition), box-shadow var(--transition);
      outline: none;
      width: 100%;

      &::placeholder { color: var(--clr-text3); }

      &:focus {
        border-color: var(--clr-accent);
        box-shadow: 0 0 0 3px rgba(90,111,82,.12);
      }

      &:invalid:not(:placeholder-shown) {
        border-color: #c0392b;
      }
    }

    & textarea { resize: vertical; min-height: 120px; }
  }

  & .frm-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;

    & input[type="checkbox"] {
      width: 18px;
      height: 18px;
      min-width: 18px;
      accent-color: var(--clr-accent);
      cursor: pointer;
      margin-top: 2px;
    }

    & label {
      font-size: var(--sz-sm);
      color: var(--clr-text2);
      line-height: 1.5;
      cursor: pointer;

      & a {
        color: var(--clr-accent);
        text-decoration: underline;
        &:hover { color: var(--clr-accent-dk); }
      }
    }
  }
}


.inquiry-tl-sec {
  background: var(--clr-bg2);

  & .inq-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    gap: 0;

    & .inq-step {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      width: 100%;
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      border-radius: var(--r-lg);
      padding: 24px;
      box-shadow: var(--sh-sm);
      transition: box-shadow var(--transition), transform var(--transition);

      &:hover {
        box-shadow: var(--sh-md);
        transform: translateX(4px);
      }

      & .inq-icon {
        width: 48px;
        height: 48px;
        background: var(--clr-accent-tint);
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--clr-accent);
        flex-shrink: 0;
      }

      & .inq-body {
        & h4 {
          font-family: var(--ff-head);
          font-size: var(--sz-lg);
          color: var(--clr-text);
          margin-bottom: 6px;
        }

        & p {
          font-size: var(--sz-sm);
          color: var(--clr-text2);
          line-height: 1.7;
        }
      }
    }

    & .inq-arrow {
      color: var(--clr-accent-lt);
      font-size: 20px;
      padding: 8px 0;
    }
  }
}


.thanks-main {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding-top: 80px;
}

.thanks-sec {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;

  & .thanks-icon {
    font-size: 64px;
    color: var(--clr-accent);
    margin-bottom: 28px;
  }

  & h1 {
    font-family: var(--ff-head);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: var(--clr-text);
    margin-bottom: 16px;
    line-height: 1.15;
  }

  & .thanks-lead {
    font-size: var(--sz-md);
    color: var(--clr-text2);
    line-height: 1.75;
    margin-bottom: 48px;
  }

  & .thanks-next {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--r-xl);
    padding: 40px;
    text-align: left;
    margin-bottom: 40px;
    box-shadow: var(--sh-md);

    & h2 {
      font-family: var(--ff-head);
      font-size: var(--sz-xl);
      color: var(--clr-text);
      margin-bottom: 28px;
    }

    & .thanks-steps {
      display: flex;
      flex-direction: column;
      gap: 24px;

      & .thanks-step {
        display: flex;
        gap: 20px;
        align-items: flex-start;

        & .ts-num {
          width: 36px;
          height: 36px;
          min-width: 36px;
          background: var(--clr-accent);
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--sz-sm);
          font-weight: 700;
        }

        & .ts-body {
          & h4 {
            font-family: var(--ff-head);
            font-size: var(--sz-base);
            color: var(--clr-text);
            margin-bottom: 4px;
          }
          & p {
            font-size: var(--sz-sm);
            color: var(--clr-text2);
            line-height: 1.65;
          }
        }
      }
    }
  }

  & .thanks-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }
}


.legal-hero {
  background: var(--clr-surface);
  padding: 140px 0 60px;
  border-bottom: 1px solid var(--clr-border);

  & h1 {
    font-family: var(--ff-head);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--clr-text);
    margin-bottom: 10px;
  }

  & .legal-date {
    font-size: var(--sz-sm);
    color: var(--clr-text3);
  }
}

.legal-sec {
  background: var(--clr-bg);

  & .legal-wrap {
    max-width: 820px;

    & .legal-body {
      & .legal-intro {
        font-size: var(--sz-md);
        color: var(--clr-text2);
        line-height: 1.8;
        margin-bottom: 40px;
        padding: 28px 32px;
        background: var(--clr-surface);
        border-left: 4px solid var(--clr-accent);
        border-radius: 0 var(--r-md) var(--r-md) 0;
        box-shadow: var(--sh-sm);
      }

      & h2 {
        font-family: var(--ff-head);
        font-size: var(--sz-xl);
        color: var(--clr-text);
        margin: 40px 0 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--clr-border);
      }

      & p {
        font-size: var(--sz-base);
        color: var(--clr-text2);
        line-height: 1.85;
        margin-bottom: 16px;

        & strong { color: var(--clr-text); font-weight: 700; }
      }
    }
  }
}


.ftr {
  background: var(--clr-text);
  color: rgba(250,249,247,.7);
  padding-top: 80px;

  & .ftr-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 80px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(250,249,247,.1);

    & .ftr-brand {
      & .ftr-logo {
        margin-bottom: 16px;
        filter: brightness(0) invert(1) opacity(0.9);
      }

      & .ftr-tagline {
        font-size: var(--sz-sm);
        line-height: 1.65;
        margin-bottom: 24px;
        color: rgba(250,249,247,.55);
      }

      & .ftr-addr {
        font-size: var(--sz-sm);
        line-height: 1.8;
        color: rgba(250,249,247,.5);

        & a {
          color: rgba(250,249,247,.5);
          transition: color var(--transition);
          &:hover { color: rgba(250,249,247,.9); }
        }
      }
    }

    & .ftr-cols {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;

      & .ftr-col {
        & h5 {
          font-size: var(--sz-xs);
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: rgba(250,249,247,.4);
          margin-bottom: 16px;
        }

        & a {
          display: block;
          font-size: var(--sz-sm);
          color: rgba(250,249,247,.6);
          padding: 4px 0;
          transition: color var(--transition);

          &:hover { color: rgba(250,249,247,.95); }
        }
      }
    }
  }

  & .ftr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px;
    font-size: var(--sz-xs);
    color: rgba(250,249,247,.35);
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
  }
}


.ck-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 180px;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 32px rgba(30,33,24,.18);

  &.ck-visible { transform: translateY(0); }

  & .ck-left {
    background: var(--clr-accent-dk);
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;

    & .ck-title {
      font-family: var(--ff-head);
      font-size: var(--sz-xl);
      color: var(--clr-surface);
      line-height: 1.2;
    }

    & .ck-desc {
      font-size: var(--sz-sm);
      color: rgba(250,249,247,.72);
      line-height: 1.65;
    }

    & .ck-links {
      display: flex;
      gap: 16px;
      font-size: var(--sz-xs);

      & a {
        color: rgba(168,196,158,.85);
        text-decoration: underline;
        &:hover { color: #fff; }
      }
    }
  }

  & .ck-right {
    background: var(--clr-surface);
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    border-left: 1px solid var(--clr-border);

    & .ck-toggles {
      display: flex;
      flex-direction: column;
      gap: 10px;

      & .ck-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        & .ck-toggle-label {
          font-size: var(--sz-sm);
          font-weight: 500;
          color: var(--clr-text);
        }

        & .ck-toggle-note {
          font-size: var(--sz-xs);
          color: var(--clr-text3);
        }

        & .ck-switch {
          position: relative;
          width: 44px;
          height: 24px;
          flex-shrink: 0;

          & input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
          }

          & .ck-slider {
            position: absolute;
            inset: 0;
            background: var(--clr-border);
            border-radius: var(--r-full);
            cursor: pointer;
            transition: background var(--transition);

            &::before {
              content: '';
              position: absolute;
              width: 18px;
              height: 18px;
              left: 3px;
              top: 3px;
              background: #fff;
              border-radius: 50%;
              transition: transform var(--transition);
              box-shadow: 0 1px 4px rgba(0,0,0,.2);
            }
          }

          & input:checked + .ck-slider {
            background: var(--clr-accent);
            &::before { transform: translateX(20px); }
          }

          & input:disabled + .ck-slider {
            background: var(--clr-accent-lt);
            opacity: 0.7;
            cursor: not-allowed;
          }
        }
      }
    }

    & .ck-btns {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      & .ck-btn-accept {
        flex: 1;
        background: var(--clr-accent);
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: var(--r-full);
        font-family: var(--ff-body);
        font-size: var(--sz-sm);
        font-weight: 700;
        cursor: pointer;
        transition: background var(--transition);
        &:hover { background: var(--clr-accent-dk); }
      }

      & .ck-btn-save {
        flex: 1;
        background: transparent;
        color: var(--clr-accent);
        border: 1.5px solid var(--clr-accent);
        padding: 10px 20px;
        border-radius: var(--r-full);
        font-family: var(--ff-body);
        font-size: var(--sz-sm);
        font-weight: 700;
        cursor: pointer;
        transition: background var(--transition), color var(--transition);
        &:hover { background: var(--clr-accent-tint); }
      }
    }
  }
}


@media (max-width: 1024px) {
  .pillars-sec .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .how-sec .how-grid { grid-template-columns: repeat(2, 1fr); }
  .workshops-prev-sec .workshops-grid { grid-template-columns: 1fr 1fr; }
  .lib-sec .lib-grid { grid-template-columns: 1fr 1fr; }
  .ftr .ftr-inner { grid-template-columns: 1fr; gap: 48px; }
  .ftr .ftr-cols { grid-template-columns: repeat(2, 1fr); }
  .content-areas-sec .content-areas-grid { grid-template-columns: 1fr; }
  .guide-sec .guide-wrap { grid-template-columns: 1fr; }
  .guide-sec .guide-wrap .guide-sidebar { display: none; }
}

@media (max-width: 768px) {
  .hdr .hdr-nav { display: none; }
  .hdr .hdr-cta { display: none; }
  .hdr .hdr-burger { display: flex; }

  .hero .hero-cnt .hero-h1 { font-size: clamp(3.5rem, 15vw, 6rem); }

  .intro-strip .intro-wrap { flex-direction: column; gap: 16px; }

  .pillars-sec { clip-path: none; padding: 80px 0; }
  .pillars-sec .pillars-grid { grid-template-columns: 1fr; }

  .img-break-sec .img-break-wrap { grid-template-columns: 1fr; gap: 40px; }
  .img-break-sec .img-break-wrap .img-break-img { aspect-ratio: 16/9; }

  .workshops-prev-sec { clip-path: none; padding: 80px 0; }
  .workshops-prev-sec .workshops-grid { grid-template-columns: 1fr; }

  .how-sec .how-grid { grid-template-columns: 1fr; }

  .approach-intro-sec .approach-intro-wrap { grid-template-columns: 1fr; gap: 40px; }

  .principles-sec { clip-path: none; padding: 80px 0; }
  .principles-sec .principles-list .principle-item { grid-template-columns: 50px 1fr; gap: 16px; }

  .contact-sec .contact-wrap { grid-template-columns: 1fr; gap: 48px; }

  .lib-sec .lib-grid { grid-template-columns: 1fr; }

  .ck-banner { grid-template-columns: 1fr; }
  .ck-banner .ck-left { padding: 24px 20px; }
  .ck-banner .ck-right { padding: 20px; border-left: none; border-top: 1px solid var(--clr-border); }

  .ftr .ftr-cols { grid-template-columns: 1fr 1fr; }

  .timeline .tl-item { grid-template-columns: 60px 1fr; gap: 16px; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .sec { padding: 64px 0; }
  .ftr .ftr-cols { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: center; }
  .thanks-actions { flex-direction: column; align-items: center; }
  .timeline .tl-item { grid-template-columns: 1fr; }
  .timeline .tl-year { display: none; }
}