:root {
      --ink: #153d33;
      --ink-soft: #53655d;
      --forest: #153f34;
      --forest-2: #1d5948;
      --cream: #fbf8f1;
      --paper: #f5efe4;
      --sand: #eadbc2;
      --line: rgba(21, 61, 51, .16);
      --gold: #d99a26;
      --gold-soft: #f2d58b;
      --coral: #c9785f;
      --white: #fffdf8;
      --shadow: 0 24px 60px rgba(31, 52, 44, .12);
      --radius-lg: 30px;
      --radius-md: 20px;
      --max: 1240px;
      --page-max: 1920px;
      --section-title-size: clamp(32px, 3.2vw, 48px);
      --narrative-title-size: clamp(38px, 4.2vw, 60px);
      --section-title-leading: 1.12;
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      background: var(--cream);
    }
    body {
      max-width: var(--page-max);
      margin: 0 auto;
      background: var(--cream);
      color: var(--ink);
      font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
      line-height: 1.75;
    }
    body, button, a { -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { display: block; max-width: 100%; }
    svg { display: block; }

    .skip-link {
      position: fixed;
      left: 16px;
      top: -60px;
      z-index: 20;
      padding: 10px 14px;
      border-radius: 12px;
      background: var(--forest);
      color: var(--white);
    }
    .skip-link:focus { top: 16px; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 12px clamp(18px, 5vw, 76px);
      background: rgba(255, 253, 248, .94);
      border-bottom: 1px solid rgba(21, 61, 51, .1);
      backdrop-filter: blur(14px);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
    }
    .brand-mark { width: 52px; height: 52px; }
    .brand-copy { display: flex; flex-direction: column; line-height: 1.3; }
    .brand-copy strong { color: var(--forest); font-size: 18px; letter-spacing: -.03em; }
    .brand-copy small { color: var(--ink-soft); font-size: 11px; }
    .brand-note {
      padding-left: 12px;
      border-left: 1px solid var(--line);
      color: var(--ink-soft);
      font-size: 11px;
      line-height: 1.25;
      white-space: nowrap;
    }
    .primary-nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(14px, 2.1vw, 30px);
      font-size: 16px;
      font-weight: 600;
      color: #3c5149;
    }
    .primary-nav a {
      position: relative;
      padding: 7px 0;
    }
    .primary-nav a::after {
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 0;
      height: 2px;
      background: var(--gold);
      content: "";
      transition: right .2s ease;
    }
    .primary-nav a:hover::after,
    .primary-nav a:focus-visible::after { right: 0; }
    .button-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 44px;
      padding: 9px 19px;
      border-radius: 999px;
      background: var(--forest-2);
      color: var(--white);
      font-weight: 700;
      transition: transform .2s ease, background .2s ease;
    }
    .button-primary:hover { transform: translateY(-2px); background: #124536; }
    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
    }

    .hero {
      position: relative;
      min-height: 600px;
      display: grid;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      background: #ded9cd;
    }
    .hero-image,
    .hero-shade {
      position: absolute;
      inset: 0;
    }
    .hero-image {
      z-index: -2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero-shade {
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(255, 253, 248, .98) 0%, rgba(255, 253, 248, .91) 30%, rgba(255, 253, 248, .38) 51%, rgba(255, 253, 248, .03) 74%),
        linear-gradient(0deg, rgba(16, 45, 37, .11), transparent 34%);
    }
    .hero-inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 64px 0 72px;
    }
    .hero-copy { max-width: 560px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--forest-2);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      width: 34px;
      height: 2px;
      background: var(--gold);
      content: "";
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 {
      color: var(--ink);
      font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
      line-height: 1.15;
    }
    .hero h1 {
      max-width: 520px;
      margin-bottom: 22px;
      font-size: clamp(52px, 6.2vw, 92px);
      letter-spacing: -.055em;
    }
    .hero h1 span {
      color: var(--gold);
      white-space: nowrap;
    }
    .hero-lead {
      max-width: 480px;
      margin-bottom: 28px;
      color: #334c43;
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.75;
    }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .button-secondary {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      padding: 8px 18px;
      border: 1px solid var(--forest-2);
      border-radius: 999px;
      background: rgba(255, 253, 248, .55);
      color: var(--forest);
      font-weight: 700;
    }
    .button-secondary:hover { background: var(--white); }
    .hero-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 28px 0 0;
      color: #536960;
      font-size: 12px;
    }
    .hero-note svg { width: 18px; height: 18px; color: var(--forest-2); }

    .section { padding: clamp(76px, 9vw, 126px) 20px; }
    .section-inner { width: min(var(--max), 100%); margin: 0 auto; }
    .section-kicker {
      margin-bottom: 12px;
      color: var(--coral);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .section-title {
      max-width: 740px;
      margin-bottom: 16px;
      color: var(--ink);
      font-size: var(--section-title-size);
      font-weight: 800;
      letter-spacing: -.045em;
      line-height: var(--section-title-leading);
    }
    .section-intro { max-width: 660px; color: var(--ink-soft); font-size: 16px; }

    .meaning {
      padding: 24px 20px 33px;
      border-top: 1px solid rgba(21, 61, 51, .08);
      background: var(--white);
      scroll-margin-top: 82px;
    }
    .meaning .section-inner { width: min(1390px, 100%); }
    .meaning-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
      gap: clamp(44px, 5vw, 68px);
      align-items: stretch;
    }
    .meaning-main { min-width: 0; }
    .meaning-heading {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      min-height: 78px;
      margin-bottom: 24px;
    }
    .meaning-heading-icon {
      display: grid;
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      margin-top: 2px;
      place-items: center;
      color: var(--ink);
    }
    .meaning-heading-icon svg { width: 48px; height: 48px; }
    .meaning-title {
      margin: 0;
      color: var(--ink);
      font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
      font-size: var(--section-title-size);
      font-weight: 800;
      letter-spacing: -.045em;
      line-height: var(--section-title-leading);
    }
    .meaning-subtitle {
      margin: 2px 0 0;
      color: #5b5b57;
      font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
      font-size: clamp(18px, 1.55vw, 23px);
      line-height: 1.4;
    }
    .meaning-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .meaning-card {
      display: flex;
      min-height: 174px;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 22px 14px 18px;
      border: 0;
      border-radius: 17px;
      background: #f5f1e8;
      box-shadow: none;
      text-align: center;
    }
    .mini-icon {
      display: grid;
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      place-items: center;
    }
    .mini-icon svg { width: 48px; height: 48px; }
    .heart-icon { color: #c96a5a; }
    .house-icon { color: #6795ad; }
    .leaf-icon { color: #4c8b71; }
    .sun-icon { color: #e9a425; }
    .meaning-card p {
      max-width: 220px;
      margin: 18px 0 0;
      color: #323c3a;
      font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
      font-size: clamp(14px, 1.03vw, 16px);
      font-weight: 700;
      line-height: 1.5;
    }
    .meaning-aside {
      display: flex;
      min-height: 292px;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 72px;
    }
    .quote {
      position: relative;
      margin: 0;
      padding: 0 24px 0 60px;
      color: #4c5350;
      font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
      font-size: clamp(16px, 1.35vw, 20px);
      line-height: 1.6;
    }
    .quote::before,
    .quote::after {
      position: absolute;
      color: #eee8dc;
      font-family: Georgia, serif;
      font-size: 70px;
      line-height: .65;
    }
    .quote::before {
      left: 0;
      top: -7px;
      content: "“";
    }
    .quote::after {
      right: 0;
      bottom: -26px;
      content: "”";
    }
    .meaning-house {
      display: block;
      width: 100%;
      max-width: 430px;
      height: 136px;
      margin-left: auto;
      margin-bottom: -24px;
      object-fit: contain;
      object-position: center bottom;
      transform: scale(1.1);
      transform-origin: center bottom;
    }

    .family {
      padding-top: clamp(42px, 3.5vw, 54px);
      padding-bottom: clamp(44px, 3.5vw, 58px);
      background: var(--paper);
    }
    .family .section-inner { width: min(1390px, 100%); }
    .family-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 22px;
    }
    .family-head .section-title {
      margin-bottom: 0;
      font-size: var(--narrative-title-size);
      line-height: 1.12;
    }
    .privacy-note {
      max-width: 300px;
      margin-bottom: 2px;
      color: var(--ink-soft);
      font-size: 13px;
    }
    .privacy-note strong { color: var(--forest); }
    .people-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1.05fr;
      gap: 16px;
    }
    .person-card {
      display: flex;
      min-height: 408px;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(21, 61, 51, .1);
      border-radius: var(--radius-md);
      background: rgba(255, 253, 248, .86);
      box-shadow: 0 18px 30px rgba(47, 56, 43, .07);
    }
    .person-art {
      position: relative;
      min-height: 212px;
      height: 250px;
      overflow: hidden;
      background: #e5efe9;
    }
    .person-art svg,
    .person-art img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .father-card .person-art img { object-position: center 18%; }
    .person-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
    .person-body .eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: .1em; }
    .person-body h3 { margin-bottom: 9px; font-size: 28px; letter-spacing: -.03em; }
    .person-body p { margin-bottom: 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
    .person-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      align-self: flex-start;
      margin-top: auto;
      padding: 8px 0;
      color: var(--forest-2);
      font-size: 13px;
      font-weight: 800;
    }
    .person-link:hover { color: var(--coral); }
    .person-card.family-card { background: #e2eee5; }
    .family-card .person-art { min-height: 190px; height: 190px; background: #d4e5d9; }
    .family-card .person-body h3 { font-size: 24px; }
    .projects {
      padding-top: 41px;
      padding-bottom: 22px;
      background: var(--white);
    }
    .projects .section-inner { width: min(1390px, 100%); }
    .projects-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 24px;
    }
    .projects-heading { display: flex; align-items: flex-start; gap: 18px; }
    .projects-heading-icon {
      display: grid;
      width: 52px;
      height: 52px;
      flex: 0 0 auto;
      margin-top: 3px;
      place-items: center;
      color: var(--ink);
    }
    .projects-heading-icon svg { width: 48px; height: 48px; }
    .projects-heading .section-title { margin: 0 0 3px; }
    .projects-subtitle { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.45; }
    .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .project-card {
      position: relative;
      display: grid;
      min-height: 190px;
      grid-template-columns: 102px minmax(0, 1fr);
      align-items: start;
      padding: 28px 46px 22px 24px;
      border: 1px solid rgba(21, 61, 51, .1);
      border-radius: 18px;
      background: #f8f6ee;
      box-shadow: 0 12px 28px rgba(38, 51, 42, .045);
      transition: background .2s ease, box-shadow .2s ease;
    }
    .project-card:hover { background: #f0eadf; box-shadow: 0 14px 28px rgba(21, 61, 51, .08); }
    .project-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
    .project-icon {
      display: grid;
      width: 102px;
      height: 102px;
      place-items: center;
      overflow: hidden;
      border-radius: 25px;
    }
    .project-icon svg { width: 76px; height: 76px; }
    .project-icon.sbj { background: linear-gradient(145deg, #ffb62e, #eb3c76); }
    .project-icon.tuajun { background: linear-gradient(145deg, #4eaf7b, #2f8066); }
    .project-icon.sadf { background: linear-gradient(145deg, #a173e2, #604bc7); }
    .project-content { min-width: 0; padding-left: 22px; }
    .project-card h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
    .project-card p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

    .closing { background: var(--cream); }
    .closing-inner {
      position: relative;
      width: min(100%, 1920px);
      margin-inline: auto;
      min-height: 320px;
      overflow: hidden;
      display: grid;
      place-items: start center;
      text-align: center;
    }
    .closing-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .closing-copy {
      position: relative;
      z-index: 1;
      max-width: 680px;
      padding: 42px 20px 0;
      color: var(--ink);
      text-shadow: 0 1px 14px rgba(255, 250, 240, .55);
    }
    .closing-copy h2 { margin: 0 0 10px; font-size: clamp(32px, 2.8vw, 42px); letter-spacing: -.045em; }
    .closing-copy p { max-width: 540px; margin: 0 auto; color: #3f4b44; font-size: 16px; line-height: 1.6; }

    .site-footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
      padding: 25px clamp(20px, 5vw, 76px);
      background: var(--white);
      border-top: 1px solid rgba(21, 61, 51, .08);
      color: var(--ink-soft);
      font-size: 13px;
      margin-top: 14px;
    }
    .footer-brand { display: flex; align-items: center; gap: 12px; color: var(--forest); }
    .footer-brand img { width: 52px; }
    .footer-brand-copy { display: flex; flex-direction: column; line-height: 1.3; }
    .footer-brand-copy strong { font-size: 16px; }
    .footer-brand-copy small { color: var(--ink-soft); font-size: 13px; }
    .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
    .footer-nav a { color: var(--ink); font-size: 14px; }
    .footer-note { justify-self: end; color: var(--ink-soft); font-size: 13px; text-align: right; }

    @media (max-width: 980px) {
      .brand-note { display: none; }
      .primary-nav { gap: 14px; }
      .hero { min-height: 560px; }
      .hero-inner { padding-top: 52px; padding-bottom: 60px; }
      .hero-shade { background: linear-gradient(90deg, rgba(255, 253, 248, .98) 0%, rgba(255, 253, 248, .87) 45%, rgba(255, 253, 248, .15) 78%), linear-gradient(0deg, rgba(16, 45, 37, .13), transparent 40%); }
      .meaning-layout { grid-template-columns: 1fr; gap: 28px; }
      .meaning-aside { min-height: 0; flex-direction: row; align-items: end; gap: 28px; padding-top: 0; }
      .meaning-aside .quote { flex: 1; }
      .meaning-house { width: 42%; height: 160px; }
      .meaning-grid { grid-template-columns: repeat(2, 1fr); }
      .people-grid { grid-template-columns: repeat(2, 1fr); }
      .family-card { grid-column: 1 / -1; }
      .family-card .person-art { min-height: 230px; height: 230px; }
      .person-card:not(.family-card) .person-art img,
      .family-card .person-art img { object-position: center top; }
      .project-grid { grid-template-columns: 1fr; }
      .project-card { min-height: auto; }
      .project-card p { min-height: auto; }
    }

    @media (max-width: 720px) {
      .site-header { min-height: 70px; padding: 10px 16px; }
      .brand-mark { width: 44px; height: 44px; }
      .brand-copy strong { font-size: 16px; }
      .brand-copy small { font-size: 10px; }
      .menu-button { display: grid; place-items: center; }
      .primary-nav {
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 8px);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 253, 248, .98);
        box-shadow: var(--shadow);
      }
      .primary-nav.is-open { display: flex; }
      .primary-nav a { padding: 12px 13px; }
      .hero { min-height: 520px; align-items: start; }
      .hero-image { object-position: 64% center; }
      .hero-shade {
        background:
          linear-gradient(180deg, rgba(255, 253, 248, .92) 0%, rgba(255, 253, 248, .7) 42%, rgba(255, 253, 248, .3) 76%, rgba(255, 253, 248, .16) 100%),
          linear-gradient(90deg, rgba(255, 253, 248, .24), rgba(255, 253, 248, 0) 78%);
      }
      .hero-inner { width: min(100% - 32px, 560px); padding: 66px 0 36px; }
      .hero h1 { font-size: clamp(48px, 14vw, 72px); }
      .hero-lead { max-width: 500px; font-size: 15px; }
      .hero-lead,
      .hero-note { text-shadow: 0 1px 9px rgba(255, 253, 248, .88); }
      .section { padding: 70px 16px; }
      .family { padding-top: 32px; padding-bottom: 40px; }
      .meaning { padding: 36px 16px 30px; scroll-margin-top: 70px; }
      .meaning-head, .family-head, .projects-head { display: block; }
      .meaning-head { margin-bottom: 28px; }
      .meaning-heading { gap: 12px; min-height: 0; margin-bottom: 24px; }
      .meaning-heading-icon { width: 38px; height: 38px; flex-basis: 38px; }
      .meaning-heading-icon svg { width: 36px; height: 36px; }
      .meaning-title { font-size: var(--section-title-size); }
      .meaning-subtitle { font-size: 15px; }
      .meaning-aside { display: block; }
      .quote { margin-top: 0; padding-left: 34px; padding-right: 18px; font-size: 16px; }
      .meaning-grid { gap: 10px; }
      .meaning-card { min-height: 142px; padding: 17px 12px 15px; }
      .mini-icon { width: 36px; height: 36px; flex-basis: 36px; }
      .mini-icon svg { width: 34px; height: 34px; }
      .meaning-card p { font-size: 14px; line-height: 1.55; }
      .meaning-house { width: 100%; height: 120px; margin-top: 10px; transform: none; }
      .privacy-note { margin-top: 18px; }
      .people-grid { grid-template-columns: 1fr; }
      .family-card { grid-column: auto; }
      .person-card { min-height: 0; }
      .person-art, .family-card .person-art { min-height: 190px; height: 190px; }
      .person-card:not(.family-card) .person-art img { object-position: center top; }
      .father-card .person-art { min-height: 220px; height: 220px; }
      .family-card .person-art img { object-position: center top; }
      .family-head .section-title { margin-bottom: 8px; }
      .privacy-note { margin-top: 0; }
      .person-body p { font-size: 15px; line-height: 1.7; }
      .projects-head { display: block; }
      .projects-heading { gap: 10px; }
      .projects-heading-icon { width: 38px; height: 38px; }
      .projects-heading-icon svg { width: 36px; height: 36px; }
      .projects-heading .section-title { font-size: var(--section-title-size); }
      .projects-subtitle { font-size: 14px; }
      .project-card { min-height: 158px; grid-template-columns: 76px minmax(0, 1fr); padding: 20px 38px 20px 16px; }
      .project-icon { width: 76px; height: 76px; border-radius: 20px; }
      .project-icon svg { width: 56px; height: 56px; }
      .project-content { padding-left: 14px; }
      .project-card h3 { margin-bottom: 7px; font-size: 19px; }
      .project-card p { font-size: 14px; line-height: 1.6; }
      .closing-inner { min-height: 420px; }
      .closing-image { object-position: left center; }
      .closing-copy {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        padding: 28px 16px 0;
      }
      .closing-copy h2 {
        max-width: 330px;
        margin: 0 auto;
        font-size: clamp(30px, 8.5vw, 36px);
        line-height: 1.12;
      }
      .closing-copy p {
        position: absolute;
        top: 94px;
        right: 16px;
        bottom: auto;
        width: min(174px, calc(100% - 230px));
        transform: none;
        text-align: left;
        font-size: 13.5px;
        line-height: 1.48;
        text-shadow: 0 1px 10px rgba(255, 250, 240, .92);
      }
      .site-footer { display: block; padding: 26px 16px; }
      .footer-nav { margin-top: 16px; gap: 12px 18px; }
      .footer-nav { justify-content: flex-start; }
      .footer-brand-copy strong { font-size: 17px; }
      .footer-brand-copy small,
      .footer-nav a,
      .footer-note { font-size: 14px; }
      .footer-note { display: block; margin-top: 16px; line-height: 1.5; text-align: left; }
    }

    @media (min-width: 481px) and (max-width: 980px) {
      .family-card .person-art { min-height: 230px; height: 230px; }
      .family-card .person-art img { object-position: center 18%; }
    }

    @media (min-width: 721px) and (max-width: 980px) {
      .closing-image { object-position: 15% center; }
    }