/* ============================================================
   PANTOR — give-forward.css
   หน้ารายละเอียดโครงการ Give Forward
   ใช้ token จาก base.css เท่านั้น — ห้ามกำหนดสีใหม่ในไฟล์นี้
   (ยกเว้นค่า rgba ของ --brand / --brand-dark ที่ต้องใช้ความโปร่งใส)

   โหลดหลัง base.css  ·  ไม่ต้องพึ่ง index.css / style.css

   01 Primitives   02 Placeholder/Photo   03 Hero   04 Sub-nav
   05 Section common   06 Concept   07 How   08 Progress
   09 Accept   10 Involved   11 FAQ   12 Outro
   13 Responsive   14 Motion / A11y
   ============================================================ */

/* ── 01 PRIMITIVES ─────────────────────────────────────────
   ปุ่ม / skip link / focus — ค่าเดียวกับ index.css
   (หน้านี้ไม่ได้โหลด index.css จึงต้องมีในไฟล์นี้
    ถ้าย้ายไป base.css แล้ว ลบส่วนนี้ออกได้)                 */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#fff;padding:12px 18px;font-size:var(--fs-small);
}
.skip:focus{left:12px;top:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-size:var(--fs-small);font-weight:500;line-height:1;
  padding:17px 26px;border:1px solid transparent;border-radius:2px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn svg{width:14px;height:10px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--solid{background:var(--brand);color:#fff}
.btn--solid:hover{background:var(--brand-dark)}
.btn--line{border-width:1.5px;border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.btn--inv{background:#fff;color:var(--brand-dark)}
.btn--inv:hover{background:var(--brand-soft)}

:where(a,button,summary):focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;
}
.gf-hero :focus-visible,
.gf-panel :focus-visible{outline-color:#fff}

/* ข้อความไทยห้ามใช้ letter-spacing / uppercase — ใช้ขนาดและน้ำหนักสร้างลำดับแทน */
.gf-lede{font-size:var(--fs-lede);line-height:1.8;color:var(--body)}
/* วลีที่ไม่ควรถูกตัดกลางคำ: บรรทัดใหม่เกิดได้เฉพาะระหว่างวลี */
.ph{display:inline-block}


/* ── 02 PLACEHOLDER / PHOTO ────────────────────────────────
   .gf-ph    = ช่องรอภาพจริง (ระบุชัดว่าเป็นภาพจำลอง)
   .gf-photo = ภาพจริง + คำบรรยาย (ใช้แทน .gf-ph เมื่อมีภาพ)   */
.gf-ph{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:var(--ph-ratio,4/5);
  background:var(--brand-soft);border-radius:2px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(16px,2vw,24px);
}
.gf-ph::after{
  content:"ต่อ";position:absolute;right:4%;bottom:-.3em;
  font-family:var(--font-th);font-size:clamp(7rem,18vw,16rem);font-weight:600;line-height:1;
  color:rgba(15,92,89,.09);pointer-events:none;
}
.gf-ph__slot{position:relative;z-index:1;max-width:22em;font-size:.8125rem;line-height:1.6;color:var(--brand-dark)}
.gf-ph--portrait{--ph-ratio:4/5;max-width:460px}
.gf-ph--wide{--ph-ratio:16/9}

.gf-photo{margin:0}
.gf-photo img{width:100%;height:auto;aspect-ratio:var(--ph-ratio,4/5);object-fit:cover;border-radius:2px}
.gf-photo--portrait{--ph-ratio:4/5;max-width:460px}
.gf-photo--wide{--ph-ratio:21/9}
.gf-cap{margin-top:12px;font-size:.875rem;line-height:1.6;color:var(--muted)}


/* ── 03 HERO ─────────────────────────────────────────────── */
.gf-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(80svh,860px);
  padding-block:clamp(28px,4vh,48px) clamp(40px,6vh,72px);
  display:flex;align-items:flex-end;
  background:var(--brand-dark);color:#fff;
}
.gf-hero__bg{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,var(--brand) 0%,var(--brand-dark) 72%);
}
.gf-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gf-hero__bg::after{ /* scrim ให้ตัวอักษรขาวอ่านได้บนภาพจริง (rgb ของ --brand-dark) */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,64,62,.5) 0%,rgba(10,64,62,.7) 55%,rgba(10,64,62,.9) 100%);
}

.gf-hero__inner{position:relative;width:100%;display:flex;flex-direction:column;gap:clamp(48px,9vh,120px)}

.gf-crumb ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.72)}
.gf-crumb li + li::before{content:"/";margin-inline:10px;opacity:.5}
.gf-crumb a{color:rgba(255,255,255,.88);transition:color .25s var(--ease)}
.gf-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.gf-crumb [aria-current]{color:#fff}

.gf-hero__body{max-width:860px}
.gf-hero__status{
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:clamp(20px,2.6vw,32px);
  font-size:var(--fs-small);font-weight:500;line-height:1.5;color:rgba(255,255,255,.9);
}
.gf-hero__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.gf-hero__dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--accent);opacity:0;
}
.gf-hero__h{color:#fff;font-weight:600;margin:0}
.gf-hero__wordmark{
  display:block;font-family:var(--font);
  font-size:clamp(3.25rem,8.4vw,8rem);font-weight:600;line-height:.98;
  letter-spacing:-.035em;text-transform:uppercase;
}
.gf-hero__logo{display:block;width:auto;height:auto;max-width:min(100%,520px);max-height:120px}
.gf-hero__th{
  display:block;margin-top:clamp(18px,2.4vw,30px);
  font-size:clamp(1.375rem,2.4vw,2rem);font-weight:500;line-height:1.5;letter-spacing:0;color:#fff;
}
.gf-hero__lede{
  margin-top:clamp(16px,2vw,24px);max-width:36rem;
  font-size:var(--fs-lede);line-height:1.8;color:rgba(255,255,255,.88);
}
.gf-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.6vw,44px)}
.gf-hero .btn--line{
  border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.gf-hero .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.16)}

.gf-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px clamp(16px,3vw,48px);
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line-inv);
}
.gf-facts dt{font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.74)}
.gf-facts dd{margin:2px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.5;color:#fff}


/* ── 04 SUB-NAV ──────────────────────────────────────────── */
.gf-subnav{
  position:sticky;top:var(--gf-sub-top,var(--hdr-h));z-index:70;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.gf-subnav ul{
  display:flex;gap:clamp(20px,3vw,40px);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gf-subnav ul::-webkit-scrollbar{display:none}
.gf-subnav a{
  position:relative;display:flex;align-items:center;min-height:52px;white-space:nowrap;
  font-size:var(--fs-nav);font-weight:500;color:var(--body);
  transition:color .25s var(--ease);
}
.gf-subnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.gf-subnav a:hover{color:var(--ink)}
.gf-subnav a[aria-current="true"]{color:var(--ink)}
.gf-subnav a[aria-current="true"]::after{transform:scaleX(1)}


/* ── 05 SECTION COMMON ───────────────────────────────────── */
.gf-sec{padding-block:var(--sec-y);scroll-margin-top:calc(var(--hdr-h) + 64px)}
.gf-h2{
  font-size:var(--fs-section);font-weight:500;line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance;
}
.gf-h2--inv{color:#fff}
.gf-h2__dot{color:var(--brand)}
.gf-head{margin-bottom:clamp(36px,5vw,64px);max-width:44rem}
.gf-head__sub{margin-top:14px;font-size:var(--fs-lede);line-height:1.7;color:var(--body)}


/* ── 06 CONCEPT ──────────────────────────────────────────── */
.gf-concept{
  background:var(--white);
  padding-top:clamp(48px,6vw,80px);   /* ← ลดบน (จาก 72–132px) */
}

/* ── Head: eyebrow + heading ────────────────────────────── */
.gf-concept__head{
  max-width:44rem;
  margin-inline:auto;              /* ← จัดกลาง container */
  text-align:center;                /* ← จัดกลางข้อความ */
  margin-bottom:clamp(40px,5.5vw,72px);
}
.gf-concept__eyebrow{
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:clamp(14px,1.8vw,20px);
}
.gf-concept__h{
  font-size:clamp(2.25rem,4.2vw,3.75rem);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.gf-concept__h-dot{color:var(--brand)}

/* ── Grid: image + body ─────────────────────────────────── */
.gf-concept__grid{
  display:grid;
  grid-template-columns:minmax(0,4.5fr) minmax(0,7fr);
  gap:clamp(40px,6vw,96px);
  align-items:start;
}

/* ── Media — depth + soft shadow ────────────────────────── */
.gf-concept__media{
  margin:0;
  position:relative;
}
.gf-concept__media .gf-ph,
.gf-concept__media .gf-photo,
.gf-concept__media img{
  aspect-ratio:4/5;
  max-width:460px;
  border-radius:4px;
  box-shadow:
    0 1px 2px rgba(10,64,62,.05),
    0 24px 48px -28px rgba(10,64,62,.22);
  width:100%;
  object-fit:cover;
  display:block;
}
.gf-concept__media .gf-photo img{border-radius:4px}

/* ── Body ───────────────────────────────────────────────── */
.gf-concept__body{
  display:flex;
  flex-direction:column;
  gap:22px;
  max-width:42rem;
  padding-top:clamp(4px,1.2vw,16px);
}
.gf-concept__body > p{
  font-size:var(--fs-body);
  line-height:1.85;
  color:var(--body);
}
.gf-concept__body > p.gf-lede{
  font-size:var(--fs-lede);
  line-height:1.8;
  color:var(--ink);
}

/* ── Pull quote — accent bar ────────────────────────────── */
.gf-concept__pull{
  position:relative;
  margin-top:clamp(16px,2.4vw,28px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--ink);
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ink);
}
.gf-concept__pull span{color:var(--brand)}

/* ── PDF DOCUMENT CTA ───────────────────────────────────── */
.gf-doc{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  margin-top:clamp(24px,3vw,36px);
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  transition:
    border-color .3s var(--ease),
    background .3s var(--ease),
    box-shadow .3s var(--ease);
}
.gf-doc__l{flex:1;min-width:0}
.gf-doc__eyebrow{
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:6px;
}
.gf-doc__title{
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.gf-doc__meta{
  margin-top:6px;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--muted);
}
.gf-doc__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.gf-doc__dl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:17px 24px;       /* ← จาก 12px 18px → เท่า .btn */
  font-size:var(--fs-small);
  font-weight:500;
  line-height:1;
  color:var(--brand-dark);
  background:transparent;
  border:1px solid var(--line);   /* ← จาก 1.5px → 1px เท่า .btn */
  border-radius:2px;
  transition:
    border-color .25s var(--ease),
    color .25s var(--ease),
    background .25s var(--ease);
}
.gf-doc__dl svg{
  width:14px;
  height:14px;
  flex:none;
}
.gf-doc__dl:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--white);
}


/* ── 07 HOW ──────────────────────────────────────────────── */
.gf-how{background:var(--paper)}
/* จำกัดความกว้างรูป HOW — ไม่ให้ใหญ่เกินบนจอ desktop */
.gf-how .gf-ph--wide,
.gf-how .gf-photo--wide{
  --ph-ratio:16/9;      /* ← บังคับให้ตรงกัน */
  max-width:780px;
  margin-inline:auto;
}
.gf-steps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);
  border-top:1px solid var(--line);
}
.gf-step{position:relative;padding-top:32px}
.gf-step::before{
  content:"";position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2px solid var(--brand);
}
.gf-step__n{font-size:.875rem;line-height:1.5;color:var(--muted)}
.gf-step__h{margin-top:4px;font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:500;line-height:1.35;color:var(--ink)}
.gf-step__d{margin-top:10px;font-size:var(--fs-small);line-height:1.8;color:var(--body)}
.gf-how .gf-ph,.gf-how .gf-photo{margin-top:clamp(48px,6vw,88px)}


/* ── 08 PROGRESS ─────────────────────────────────────────── */
.gf-panel{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4vw,72px);align-items:start;
  padding:clamp(32px,5vw,72px);
  background:var(--brand-dark);color:#fff;border-radius:2px;
}
.gf-panel::before{
  content:"ปันต่อ";position:absolute;right:-.06em;bottom:-.22em;z-index:-1;
  font-family:var(--font-th);font-size:clamp(6rem,15vw,13rem);font-weight:600;line-height:.9;
  letter-spacing:-.03em;color:rgba(255,255,255,.05);white-space:nowrap;pointer-events:none;user-select:none;
}
.gf-updated{margin-top:18px;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.78)}

.gf-track{border-top:1px solid var(--line-inv)}
.gf-track__i{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line-inv);
  font-size:var(--fs-body);line-height:1.6;color:rgba(255,255,255,.86);
}
.gf-track__i strong{font-weight:500;color:#fff}
.gf-track__st{display:block;font-size:var(--fs-small);color:rgba(255,255,255,.78)}
.gf-track__dot{width:16px;height:16px;margin-top:5px;border-radius:50%;position:relative}
.gf-track__i[data-state="done"] .gf-track__dot{background:#fff}
.gf-track__i[data-state="done"] .gf-track__dot::after{
  content:"";position:absolute;left:5px;top:2.5px;width:4px;height:8px;
  border:solid var(--brand-dark);border-width:0 2px 2px 0;transform:rotate(40deg);
}
.gf-track__i[data-state="current"] .gf-track__dot{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.22)}
.gf-track__i[data-state="current"] .gf-track__st{color:#fff;font-weight:500}
.gf-track__i[data-state="next"] .gf-track__dot{border:1.5px dashed rgba(255,255,255,.7)}


/* ── 09 ACCEPT ───────────────────────────────────────────── */
.gf-accept{background:var(--paper)}
.gf-accept__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,112px);
  border-top:1px solid var(--ink);
}
.gf-list{padding-top:clamp(20px,2.6vw,32px)}
.gf-list__h{margin-bottom:8px;font-size:var(--fs-card);font-weight:500;line-height:1.35;color:var(--ink)}
.gf-list li{
  position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);
  font-size:var(--fs-body);line-height:1.75;color:var(--ink);
}
/* เครื่องหมาย ✓ / ✕ วาดด้วย CSS เพื่อไม่พึ่งสีอย่างเดียว */
.gf-list--yes li::before{
  content:"";position:absolute;left:5px;top:calc(14px + .5em);width:6px;height:12px;
  border:solid var(--brand);border-width:0 2px 2px 0;transform:rotate(40deg);
}
.gf-list--no li::before,.gf-list--no li::after{
  content:"";position:absolute;left:0;top:calc(14px + .875em);width:15px;height:2px;background:var(--muted);
}
.gf-list--no li::before{transform:rotate(45deg)}
.gf-list--no li::after{transform:rotate(-45deg)}
.gf-list--no li{color:var(--body)}
.gf-note{margin-top:clamp(24px,3vw,36px);max-width:44rem;font-size:var(--fs-small);line-height:1.75;color:var(--muted)}


/* ── 10b TEAM ─────────────────────────────────────────────── */
.gf-support{
  background:var(--white);
  border-top:1px solid var(--line);    /* ← เส้นเข้ม */
}

.gf-team__head{
  max-width:100%;
  margin-inline:auto;
  text-align:center;
}
.gf-team__eyebrow{
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:clamp(14px,1.8vw,20px);
}

.gf-team__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,40px) clamp(20px,2.6vw,32px);
}

.gf-member{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  text-align:center;
}

.gf-member__avatar{
  position:relative;
  aspect-ratio:4/5;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:180px;              /* ← จำกัดขนาด */
  margin-inline:auto;           /* ← จัดกลางใน card */
  width:100%;
}
/* ป้องกันรูปภาพสมาชิก */
.gf-member__photo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.gf-member__avatar::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(70% 70% at 30% 30%, rgba(10,64,62,.05), transparent 65%);
  pointer-events:none;
}
.gf-member__initial{
  position:relative;
  z-index:1;
  font-family:var(--font-th);
  font-size:clamp(2.5rem,4vw,3.25rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--brand);
  opacity:.22;
}

.gf-member__name{
  margin:0;
  font-size:clamp(1.125rem,1.4vw,1.375rem);   /* 18–22px */
  font-weight:500;
  line-height:1.45;
  color:var(--ink);
}
.gf-member__role{
  margin:0;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--muted);
}

/* ── Team Collapse + Fade ────────────────────────────────
   ค่าย่อ: 1.5 แถว — Desktop 4+4(half) / Mobile 2+2(half)
   ถ้าไม่พอดี: tune ค่า max-height ด้านล่าง
   ──────────────────────────────────────────────────────── */

.gf-team__grid{
  position:relative;
  max-height:1600px;                  /* ความสูงธรรมชาติ (ขยาย) */
  overflow:hidden;
  transition:max-height .55s var(--ease);
}

/* ── Collapsed state ─────────────────────────────────────── */
.gf-team__grid.is-collapsed{
  max-height:680px;                   /* ← เห็น 2 แถวเต็ม (4+4) */
}

/* ── Fade overlay ที่ขอบล่าง (แสดงเมื่อย่อ) ────────────────── */
.gf-team__grid::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:300px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.7) 55%,
    var(--white) 100%
  );
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .5s var(--ease);
}
.gf-team__grid.is-collapsed::after{
  opacity:1;
}

/* ── Toggle button ─────────────────────────────────────── */
.gf-team__more{
  display:flex;
  justify-content:center;
  margin-top:clamp(36px,4.5vw,56px);
}
.gf-team__toggle-icon{
  width:12px;
  height:8px;
  flex:none;
  transition:transform .3s var(--ease);
}
.gf-team__toggle[aria-expanded="true"] .gf-team__toggle-icon{
  transform:rotate(180deg);
}

@media (prefers-reduced-motion:reduce){
  .gf-team__grid,
  .gf-team__grid::after,
  .gf-team__toggle-icon{transition:none}
}


/* ── 10 SUPPORT ─────────────────────────────────────────── */
.gf-support{background:var(--white)}

.gf-support__head{
  max-width:100%;
  margin-inline:auto;
  text-align:center;
}
.gf-support__eyebrow{
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:clamp(14px,1.8vw,20px);
}

.gf-support__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(20px,2.4vw,32px);
}

.gf-support__card{
  flex:1 1 340px;
  max-width:520px;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,28px);
  align-items:center;
  padding:clamp(24px,3vw,32px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
}

.gf-support__logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.gf-support__logo-wrap img{
  width:clamp(120px,16vw,180px);   /* ← ใหญ่ขึ้น ~50% */
  height:auto;
  display:block;
}

.gf-support__name{
  font-size:var(--fs-card);
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
  margin-bottom:6px;
}
.gf-support__desc{
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--body);
}


/* ── 11 FAQ ──────────────────────────────────────────────── */
.gf-faq{background:var(--paper)}
.gf-faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.gf-q{border-bottom:1px solid var(--line)}
.gf-q:first-child{border-top:1px solid var(--ink)}
.gf-q summary{
  position:relative;display:block;list-style:none;cursor:pointer;
  padding:20px 44px 20px 0;
  font-size:var(--fs-card);font-weight:500;line-height:1.4;color:var(--ink);
}
.gf-q summary::-webkit-details-marker{display:none}
.gf-q summary::before,.gf-q summary::after{
  content:"";position:absolute;right:6px;top:50%;width:16px;height:2px;margin-top:-1px;background:var(--brand);
  transition:transform .3s var(--ease);
}
.gf-q summary::after{transform:rotate(90deg)}
.gf-q[open] summary::after{transform:rotate(0)}
.gf-q p{padding:0 44px 24px 0;max-width:40rem;font-size:var(--fs-body);line-height:1.85;color:var(--body)}
.gf-inlink{color:var(--brand-dark);font-weight:500;text-decoration:underline;text-underline-offset:.25em}
.gf-inlink:hover{text-decoration-thickness:2px}


/* ── 12 OUTRO ────────────────────────────────────────────── */
.gf-outro{padding-block:var(--sec-y);background:var(--brand-soft)}
.gf-outro__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(28px,4vw,64px)}
.gf-outro__h{
  max-width:20ch;font-size:clamp(1.75rem,3.2vw,2.875rem);font-weight:500;line-height:1.35;
  letter-spacing:-.02em;color:var(--brand-dark);text-wrap:balance;
}
.gf-outro__h span{color:var(--brand)}


/* ── 13 RESPONSIVE ───────────────────────────────────────── */
@media (max-width:1024px){
  /* Concept — stack บน-ล่าง */
  .gf-concept__head{margin-bottom:clamp(32px,5vw,48px)}
  .gf-concept__grid{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(32px,5vw,48px);
  }
  .gf-concept__body{max-width:100%;padding-top:0}
  .gf-concept__media .gf-ph,
  .gf-concept__media .gf-photo{
    max-width:460px;
    margin-inline:auto;      /* ← จัดกลางบน tablet */
  }

  .gf-panel,
  .gf-faq__grid{grid-template-columns:minmax(0,1fr)}
  .gf-ph--portrait,.gf-photo--portrait{max-width:420px}
  /* Team — 3 คอลัมน์ */
  .gf-team__grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Team — 3 คอลัมน์ จัดกลาง */
  .gf-team__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:680px;
    margin-inline:auto;
  }
}

@media (max-width:900px){
  .gf-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ขั้นตอน: เปลี่ยนเป็นเส้นเวลาแนวตั้ง */
  .gf-steps{grid-template-columns:minmax(0,1fr);gap:0;border-top:0}
  .gf-step{padding:0 0 30px 38px}
  .gf-step::before{top:6px;left:0}
  .gf-step::after{
    content:"";position:absolute;left:6px;top:24px;bottom:-6px;width:1px;background:var(--line);
  }
  .gf-step:last-child{padding-bottom:0}
  .gf-step:last-child::after{display:none}
}

@media (max-width:768px){
  .gf-hero{min-height:auto}
  .gf-hero__inner{gap:56px}
  .gf-accept__grid{grid-template-columns:minmax(0,1fr)}
  .gf-list + .gf-list{margin-top:clamp(28px,6vw,40px)}
}

@media (max-width:600px){
  .gf-hero__cta{flex-direction:column}
  .gf-hero__cta .btn,
  .gf-panel .btn,
  .gf-outro .btn{width:100%}
  .gf-hero{padding-top:68px}
  .gf-panel{padding:28px 22px}
  .gf-outro__in{flex-direction:column;align-items:flex-start}
  .gf-q summary,.gf-q p{padding-right:36px}
  /* Concept */
  .gf-concept__h{
    font-size:clamp(2.75rem,10vw,3.25rem);   /* ← เพิ่ม */
    line-height:1.18;
  }
  .gf-concept__pull{
    font-size:clamp(1.25rem,5.5vw,1.5rem);
    line-height:1.5;
  }
  .gf-concept__media .gf-ph,
  .gf-concept__media .gf-photo{max-width:100%}
  /* PDF CTA — stack บน-ล่าง */
  .gf-doc{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    text-align:center;      /* ← จัดกลางทุกข้อความ */

  }
  .gf-doc__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .gf-doc__actions .btn,
  .gf-doc__dl{
    width:100%;
    justify-content:center;
  }
  /* Team — 2 คอลัมน์, avatar จัตุรัส, typography กระชับ */
  .gf-team__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 14px;
    max-width:100%;
  }
  .gf-member{gap:10px}
  .gf-member__avatar{
    max-width:140px;     /* ← จาก 100% → 140px */
  }
  .gf-member__initial{
    font-size:clamp(2rem,8vw,2.5rem);
  }
  .gf-member__name{
    font-size:var(--fs-small);    /* ← จาก fs-body → fs-small */
    line-height:1.4;
  }
  .gf-member__role{
    font-size:.8125rem;           /* 13px — พอดีกับจอ 375px */
  }
  /* Team Collapse — Mobile: ตัดที่ 2 แถวของ 2 cols */
  .gf-team__grid{max-height:1400px}          /* ← จาก 1100 → 1400 · พอสำหรับ 5 แถว */
  .gf-team__grid.is-collapsed{max-height:500px}   /* ← เห็น 2 แถวเต็ม (2+2) */
  .gf-team__grid::after{height:140px}

  .gf-team__more{margin-top:28px}
  .gf-team__toggle{width:auto;max-width:240px}
}


/* ── 14 MOTION / A11Y ────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .gf-hero__dot::after{animation:gf-pulse 2.4s var(--ease) infinite}
  @keyframes gf-pulse{
    0%{transform:scale(.7);opacity:.4}
    70%,100%{transform:scale(1.9);opacity:0}
  }
}
@media (prefers-reduced-motion:reduce){
  .gf-subnav a::after,.gf-q summary::before,.gf-q summary::after,
  .btn,.btn svg{transition:none}
}