{"id":3960,"date":"2026-07-18T20:00:03","date_gmt":"2026-07-18T13:00:03","guid":{"rendered":"https:\/\/dingfongfood.com\/aboutus-2\/"},"modified":"2026-08-05T19:32:16","modified_gmt":"2026-08-05T12:32:16","slug":"aboutus","status":"publish","type":"page","link":"https:\/\/dingfongfood.com\/th\/aboutus\/","title":{"rendered":"\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32"},"content":{"rendered":"<!-- ============================================================================\n     ABOUT HERO \u2014 Figma 353:4783 (\"hero\", abot-us-3). Page canvas 1920 wide;\n     this frame spans page-y 70 (navbar headroom top) .. 1100 (hand-off to the\n     hero-2 \/ df\/about-products band) \u2192 desktop frame box 1920\u00d71030.\n\n     Layers (back \u2192 front):\n       z-0   GLOW FIELD (Figma 380:5659) \u2014 the page's own orange + gold\n             line-art tile + a radial gradient that brightens the bottle side\n             (.df-hero-field, src\/pages\/about.css). Desktop only; full-bleed;\n             overhangs the frame at the bottom to meet the about-products\n             cream band. Replaces the flat page background that showed through\n             here between 2026-07-24 and this change. The Figma orange field's\n             inline fruit line-art SVG (\"Group 9\" 353:4310) stays removed \u2014\n             the tile in this layer covers that role.\n       z-[5] stray leaf \"leaves 2\" left of the cluster (page ~234,650).\n       z-10  PRODUCT CLUSTER (Figma \"products-hero\" 353:5310, page box\n             411,161 \u2192 1217,1060 = 806\u00d7899) \u2014 .hero-products-anim (entrance\n             rise + idle pulse, effects.js). Inside, at % of the 806\u00d7899 box:\n               353:4785\/360:5313 \u0e2a\u0e49\u0e21 1     big half-orange + leaf   (behind bottles)\n               353:4786  \u0e2a\u0e49\u0e212 1            small orange             (behind bottles)\n               353:4787  Orange 1          OJ bottle    rot \u22129.7\u00b0   box 516,161 445\u00d7854\n               353:4788  Strawberry 1      red bottle   rot 7.85\u00b0   box 783,172 421\u00d7848\n               353:4795  \u0e2a\u0e15\u0e2d\u0e40\u0e1a\u0e2d\u0e23\u0e23\u0e35\u0e48 1 3     small strawberry rot 20.83\u00b0 (front)\n               353:4790  \u0e2a\u0e15\u0e2d\u0e40\u0e1a\u0e2d\u0e23\u0e23\u0e35\u0e48 2 1     big strawberry  rot 98.02\u00b0 (front)\n               353:4792 \/ 353:4796         leaf-accent SVGs (front)\n             Fruit cut-outs float smoothly via [data-fruit-float] (effects.js\n             initFruitFloats; dedicated transform layer between the positioning\n             wrapper and the img \u2014 see the convention note in effects.js).\n       z-20  CREAM CARD (Figma \"content-hero\" 353:5311: card 353:4789 @\n             1161,305 685\u00d7581 r65 #f8f3ed; heading 353:4800 Sriracha 64\n             #ee7623; body 353:4799 Kanit 22 #ee7623) \u2014 .hero-heading-anim.\n\n     % insets derive from the 1920\u00d71030 frame (x\/1920, (page-y \u2212 70)\/1030);\n     cluster children from the 806\u00d7899 cluster box. Type is sized in cqw of the\n     frame (64\/1920 = 3.333cqw, 22\/1920 = 1.146cqw) with rem floors for small\n     screens. Below lg the card stacks on top (fixed navbar headroom, the\n     mobile bar is ~64px tall and NOT proportional) and the cluster bottom-\n     anchors \u2014 same approach as the pre-redesign block.\n============================================================================ -->\n<section class=\"relative w-full\" data-hero data-about-hero>\n  <div\n    class=\"@container relative mx-auto aspect-[1920\/3900] w-full max-w-(--df-frame-max) sm:aspect-[1920\/2500] lg:aspect-[1920\/1030]\"\n  >\n    <!-- \u2500\u2500 layer 0 \u2014 ORANGE GLOW FIELD (Figma 380:5659) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         The 2026-07-24 hero had NO background of its own: the page-wide\n         body.page-aboutus field (flat orange + tiled gold line-art) showed\n         straight through. This restores one background layer \u2014 the SAME orange\n         + gold tile as that page field, plus the Figma radial gradient over\n         both \u2014 so the hero reads bright on the bottle cluster and settles back\n         to the page's orange behind the content card. The three paint layers\n         are .df-hero-field (src\/pages\/about.css); everything below is geometry.\n\n         Figma places the vector at page-y 0..1521. The <header> is\n         `absolute top-0` (navbar\/render.php) so it takes no vertical space \u2192\n         the page's y is the Figma page-y MINUS the frame's 70px navbar\n         headroom. Hence -3.65cqw (= \u221270\/1920) and h 79.22cqw (= 1521\/1920),\n         both in cqw of this frame so the layer scales with it \u2014 the same\n         lock the about-products cream band uses.\n\n         Full-bleed (w-screen + left-1\/2 + -translate-x-1\/2 + max-w-none):\n         the frame is capped at --df-frame-max but a background must reach\n         both viewport edges. Same treatment as the cream band and the navbar\n         wave.\n\n         Because the base is the page's own orange, neither edge of this layer\n         can show a colour step against the page field \u2014 only the tile's phase\n         (this layer is offset by the 70px headroom). Both edges are covered\n         anyway: the TOP sits inside the navbar's opaque bg wave (z-50 vs this\n         z-0).\n\n         BOTTOM edge overhangs the frame by 21.9cqw and tucks UNDER the\n         about-products cream band, so the glow's own wave never has to line up\n         with anything. about-products is a later positioned sibling,\n         so its band and cards paint over the overhang. The band's cream\n         starts 11.45cqw below this frame at every width (its -8.5%\/-122px\n         pull-up and the frame heights scale together) and the glow's wave\n         crests at 13.0cqw, so the wave stays covered.\n\n         Desktop only, like the cream band itself: below lg every About block\n         is a flow column and the band is hidden, so there would be nothing to\n         hide this layer's bottom edge against. -->\n    <div\n      class=\"df-hero-field pointer-events-none absolute left-1\/2 -top-[3.65cqw] z-0 hidden h-[79.22cqw] w-screen max-w-none -translate-x-1\/2 lg:block\"\n      aria-hidden=\"true\"\n    ><\/div>\n\n    <!-- stray leaf left of the cluster (Figma 353:4791 \"leaves 2\").\n         NOTE: the whole leaf+cluster+card composition is shifted 8.78% LEFT of\n         the raw Figma x-coords \u2014 the artboard leaves 21.41% left \/ 3.85% right\n         margins, which reads right-shifted against every other (centred)\n         section; shifted so both margins are 12.63%. Internal offsets are\n         untouched (Figma-x \u2212 8.78%). -->\n    <div class=\"pointer-events-none absolute left-[3.41%] top-[52%] z-[5] hidden aspect-[113\/106] w-[5.91%] lg:block\" aria-hidden=\"true\">\n      <div class=\"absolute inset-0 flex items-center justify-center\" data-fruit-float data-fruit-depth=\"0.4\">\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-leaves-2.webp\" alt=\"\" class=\"w-[80%] rotate-[83.74deg]\" decoding=\"async\" loading=\"lazy\" \/>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 PRODUCT CLUSTER (Figma 353:5310) \u2014 entrance rise + idle pulse. \u2500\u2500 -->\n    <div\n      class=\"hero-products-anim absolute bottom-0 left-[7.5%] z-10 aspect-[806\/899] w-[85%] sm:left-[15%] sm:w-[70%] lg:bottom-auto lg:left-[12.63%] lg:top-[8.83%] lg:w-[41.98%]\"\n    >\n      <!-- \u0e2a\u0e49\u0e21 1 \u2014 big half-orange + leaf (Figma 360:5312, behind the bottles). -->\n      <div class=\"pointer-events-none absolute left-0 top-[58.84%] z-0 aspect-[378\/370] w-[46.84%]\" aria-hidden=\"true\">\n        <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.55\">\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-leaf-1.webp\" alt=\"\" class=\"absolute bottom-[4%] left-[-4%] w-[52%] rotate-[8deg]\" width=\"893\" height=\"455\" decoding=\"async\" \/>\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-orange-half.webp\" alt=\"\" class=\"absolute right-0 top-0 w-[88%] rotate-[-19.75deg]\" width=\"1707\" height=\"1640\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n\n      <!-- \u0e2a\u0e49\u0e212 \u2014 small orange (Figma 353:4786, behind the bottles). -->\n      <div class=\"pointer-events-none absolute left-[14.64%] top-[32.48%] z-0 aspect-[188\/182] w-[23.31%]\" aria-hidden=\"true\">\n        <div class=\"absolute inset-0 flex items-center justify-center\" data-fruit-float data-fruit-depth=\"0.5\">\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-orange-2.webp\" alt=\"\" class=\"w-full rotate-[-4.64deg]\" width=\"778\" height=\"752\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n\n      <!-- OJ bottle (Figma 353:4787 \"Orange 1\", img 312.7\u00d7813.1 rot \u22129.7\u00b0 in a\n           445.2\u00d7854.1 box). LCP-adjacent \u2014 not lazy. -->\n      <div class=\"absolute left-[13.03%] top-0 z-10 flex aspect-[445\/854] w-[55.24%] items-center justify-center\">\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-bottle-orange.webp\"\n          alt=\"\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e2a\u0e49\u0e21\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e15\u0e23\u0e32\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\"\n          class=\"w-[70.24%] rotate-[-9.7deg] drop-shadow-[0_30px_21.8px_rgba(119,55,29,0.25)]\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n          width=\"310\"\n          height=\"806\"\n        \/>\n      <\/div>\n\n      <!-- Strawberry bottle (Figma 353:4788 \"Strawberry 1\", rot 7.85\u00b0). -->\n      <div class=\"absolute left-[46.18%] top-[1.21%] z-10 flex aspect-[421\/848] w-[52.21%] items-center justify-center\">\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-bottle-strawberry.webp\"\n          alt=\"\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e2a\u0e15\u0e23\u0e2d\u0e27\u0e4c\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e23\u0e35\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e15\u0e23\u0e32\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\"\n          class=\"w-[74.31%] rotate-[7.85deg] drop-shadow-[0_29px_16.3px_rgba(119,55,29,0.25)]\"\n          fetchpriority=\"high\"\n          decoding=\"async\"\n          width=\"310\"\n          height=\"806\"\n        \/>\n      <\/div>\n\n      <!-- Small strawberry between the bottle necks (Figma 353:4795, front). -->\n      <div class=\"pointer-events-none absolute left-[46.4%] top-[17.46%] z-20 aspect-[168\/175] w-[20.87%]\" aria-hidden=\"true\">\n        <div class=\"absolute inset-0 flex items-center justify-center\" data-fruit-float data-fruit-depth=\"0.8\">\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-strawberry-1.webp\" alt=\"\" class=\"w-[75.5%] rotate-[20.83deg]\" width=\"1231\" height=\"1352\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n\n      <!-- Big strawberry bottom-right (Figma 353:4790, front of the bottles). -->\n      <div class=\"pointer-events-none absolute left-[72.33%] top-[69.08%] z-20 aspect-[223\/233] w-[27.69%]\" aria-hidden=\"true\">\n        <div class=\"absolute inset-0 flex items-center justify-center\" data-fruit-float data-fruit-depth=\"0.7\">\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-strawberry-2.webp\" alt=\"\" class=\"w-[93.3%] rotate-[98.02deg]\" width=\"1550\" height=\"1461\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n\n      <!-- Leaf accents (Figma 353:4792 \/ 353:4796 \u2014 same SVG, one flipped). -->\n      <div class=\"pointer-events-none absolute left-[15.38%] top-[22.58%] z-20 aspect-[95\/77] w-[11.78%]\" aria-hidden=\"true\">\n        <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.9\">\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/leaf-accent.svg\" alt=\"\" class=\"h-full w-full\" width=\"95\" height=\"77\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n      <div class=\"pointer-events-none absolute left-[83.1%] top-[59.32%] z-20 aspect-[111\/99] w-[13.82%]\" aria-hidden=\"true\">\n        <div class=\"absolute inset-0 flex items-center justify-center\" data-fruit-float data-fruit-depth=\"0.9\">\n          <img loading=\"lazy\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/leaf-accent.svg\" alt=\"\" class=\"w-[85%] -scale-y-100 rotate-[165.42deg]\" width=\"95\" height=\"77\" decoding=\"async\" \/>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 CREAM CONTENT CARD (Figma 353:5311 \"content-hero\") \u2014 zoom entrance\n         + idle pulse (.hero-heading-anim). Content-driven height (robust to\n         longer translations); padding\/type in cqw of the frame.\n         DELIBERATE deviations from Figma (user-approved, hero unpinned):\n         \u00b7 outer wrapper spans the cluster's vertical band (8.83%..96.11%) and\n           flex-centres the card, so the taller EN copy stays optically centred\n           on the bottles \u2014 the wrapper is transform-free on purpose; entrance\n           keyframes + the WAAPI idle pulse own .hero-heading-anim's transform\n           (same layering convention as [data-fruit-float]).\n         \u00b7 warm rest shadow borrows the bottles' brown (119,55,29) at low\n           opacity to lift the card off the busy line-art field.\n         \u00b7 heading and body prose both sit in Figma's ember #ee7623 \u2014 client\n           decision 2026-08-05, applied to every #b0520d on the page at once.\n           It is the colour the design asks for and it does NOT meet contrast:\n           on this card's cream it is 2.63:1, under the 4.5 body text needs AND\n           under the 3 the 48px heading needs. #b0520d, which held both at 4.69,\n           was what 14670d6's a11y pass put here for exactly that reason. The\n           trade was made with the numbers on the table; this note exists so the\n           next audit reads it as a decision rather than a regression.\n           The family stays Prompt per DESIGN.md (Figma set Kanit here). \u2500\u2500 -->\n    <div\n      class=\"pointer-events-none absolute left-[6%] top-[calc(64px+1.25rem)] z-20 w-[88%] lg:bottom-[3.89%] lg:left-[51.69%] lg:top-[8.83%] lg:flex lg:w-[35.68%] lg:items-center\"\n    >\n      <div\n        class=\"hero-heading-anim pointer-events-auto rounded-[clamp(20px,3.39cqw,65px)] bg-about-cream p-[6%] shadow-[0_24px_50px_rgba(119,55,29,0.16)] lg:w-full lg:px-[2.9cqw] lg:py-[2.3cqw]\"\n      >\n        <!-- The h1 leads with the page topic for crawlers and screen readers. The\n             visible heading is the brand name alone (Figma 353:4800), so on its own\n             the h1 never said what this page IS \u2014 <title> and the nav carry \"About\n             Us\" but the page's own top-level heading did not. sr-only keeps the\n             rendered design byte-identical.\n             It reuses the SAME gettext string the navbar (:95) and footer already\n             use, so this adds NO new translatable string \u2014 WPML String Translation\n             already holds \"About Us\" for it, and there is nothing to seed here or\n             on production. It sits in the markup rather than inside the editable\n             $df_heading so a client edit on the canvas cannot drop it (the editor's\n             RichText owns $df_heading, and sr-only renders nothing, so the Site\n             Editor canvas still matches the front end pixel for pixel). -->\n        <h1\n          class=\"font-accent leading-[1.3] text-balance text-[#ee7623]\"\n          style=\"font-size: clamp(1.9rem, 3.333cqw, 4rem)\"\n        >\n          <span class=\"sr-only\">\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32 \u2014 <\/span>\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 (Ding Fong)        <\/h1>\n        <div\n          class=\"mt-[0.5em] flex flex-col gap-[1.3em] font-body leading-normal text-[#ee7623] text-pretty\"\n          style=\"font-size: clamp(0.95rem, 1.146cqw, 1.4rem)\"\n        >\n          <p class=\"font-medium\">\u0e04\u0e37\u0e2d \u0e41\u0e1a\u0e23\u0e19\u0e14\u0e4c\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e33\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e41\u0e25\u0e30 \u0e40\u0e1a\u0e40\u0e01\u0e2d\u0e23\u0e35\u0e48 \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e04\u0e39\u0e48\u0e27\u0e07\u0e01\u0e32\u0e23\u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e02\u0e2d\u0e07\u0e44\u0e17\u0e22\u0e21\u0e32\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 27 \u0e1b\u0e35 \u0e01\u0e48\u0e2d\u0e15\u0e31\u0e49\u0e07\u0e42\u0e14\u0e22 \u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e04\u0e38\u0e13\u0e04\u0e38\u0e19\u0e2b\u0e25\u0e38\u0e07 \u0e2b\u0e27\u0e31\u0e07 \u0e41\u0e25\u0e30 \u0e04\u0e38\u0e13\u0e40\u0e2a\u0e32\u0e27\u0e13\u0e35\u0e22\u0e4c \u0e2b\u0e27\u0e31\u0e07 \u0e17\u0e35\u0e48\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19\u0e27\u0e48\u0e32\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e41\u0e15\u0e48\u0e04\u0e37\u0e2d &#8220;\u0e42\u0e2d\u0e01\u0e32\u0e2a&#8221; \u0e17\u0e35\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e1b\u0e34\u0e14\u0e1b\u0e23\u0e30\u0e15\u0e39\u0e2a\u0e39\u0e48\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e43\u0e2b\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e04\u0e19\u0e44\u0e17\u0e22\u0e08\u0e33\u0e19\u0e27\u0e19\u0e21\u0e32\u0e01\u0e44\u0e14\u0e49<\/p>\n          <p>\u0e43\u0e19\u0e22\u0e38\u0e04\u0e17\u0e35\u0e48\u0e15\u0e25\u0e32\u0e14\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e44\u0e17\u0e22\u0e22\u0e31\u0e07\u0e08\u0e33\u0e01\u0e31\u0e14\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e04\u0e48\u0e23\u0e49\u0e32\u0e19\u0e01\u0e32\u0e41\u0e1f\u0e41\u0e25\u0e30\u0e0a\u0e32 \u0e1c\u0e39\u0e49\u0e01\u0e48\u0e2d\u0e15\u0e31\u0e49\u0e07\u0e44\u0e14\u0e49\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e2b\u0e25\u0e32\u0e01\u0e23\u0e2a\u0e0a\u0e32\u0e15\u0e34 \u0e41\u0e25\u0e30\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2d\u0e37\u0e48\u0e19 \u0e46 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e2d\u0e19\u0e2a\u0e39\u0e15\u0e23\u0e01\u0e32\u0e23\u0e0a\u0e07\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e32\u0e01\u0e21\u0e35\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u0e14\u0e49\u0e27\u0e22\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23 \u0e04\u0e38\u0e13\u0e2b\u0e27\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e1c\u0e39\u0e49\u0e1c\u0e25\u0e34\u0e15 \u0e41\u0e15\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19 &#8220;\u0e1c\u0e39\u0e49\u0e43\u0e2b\u0e49\u0e42\u0e2d\u0e01\u0e32\u0e2a&#8221; \u0e43\u0e2b\u0e49\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e19\u0e33\u0e44\u0e1b\u0e15\u0e48\u0e2d\u0e22\u0e2d\u0e14\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e44\u0e14\u0e49<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Decorative leaves beyond this frame come from the page-wide parallax\n         LEAF FIELD (assets\/js\/leaf-field.js, enqueued for aboutus) plus the\n         per-section [data-fruit-float] cut-outs added across the page. -->\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT PRODUCTS (hero-2) \u2014 two green feature cards on the orange field, cream\n     band rising behind them. Desktop (\u2265lg): byte-faithful absolute frame at\n     aspect 1920\/730. Below lg: normal-flow centered column (product image above\n     its card, cards stacked); the cream curve hides (the next band, about-brand,\n     is the same cream so the page still transitions orange \u2192 cream cleanly). -->\n<!-- lg:-mt pulls the whole band up over the (now background-less) hero's empty\n     tail \u2014 user request 2026-07-24: tighten the dead space between the hero\n     cluster and the two green cards. The `!` is required: the main wp-block-group\n     has blockGap 0, whose UNLAYERED `> * { margin-block-start:0 }` rule beats a\n     layered Tailwind utility. The -130px floor caps the pull on >1440 viewports,\n     where %-margins keep growing but the frame is clamped at --df-frame-max. -->\n<section class=\"relative w-full lg:mt-[max(-8.5%,-122px)]!\" data-about-products>\n  <!-- cream band (Figma Vector 12 top): wavy curve + solid fill, bottom-anchored\n       in cqw so the baseline stays locked to the frame at any width. Full-bleed\n       (w-screen) like the other band layers. Desktop only. -->\n  <div class=\"pointer-events-none absolute bottom-0 left-1\/2 z-0 hidden w-screen max-w-none -translate-x-1\/2 lg:block\" aria-hidden=\"true\">\n    <div class=\"df-cream-field absolute inset-x-0 bottom-0 h-[18.1cqw]\"><\/div>\n    <img\n      src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/band-curve-top.svg\"\n      alt=\"\"\n      class=\"absolute inset-x-0 bottom-[18cqw] h-[9.11cqw] w-full\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    \/>\n  <\/div>\n\n  <div class=\"@container relative mx-auto w-full max-w-(--df-frame-max)\">\n    <!-- inner frame: flow column on mobile, Figma-aspect absolute box on desktop -->\n    <div class=\"relative mx-auto flex w-[86%] flex-col items-center py-[9%] lg:block lg:aspect-[1920\/730] lg:w-full lg:py-0\">\n\n      <!-- \u2500\u2500 LEFT: juice trio (Figma 353:4802) over its card. z-20. -->\n      <div class=\"pointer-events-none relative z-20 aspect-[398\/344] w-[58%] max-w-[300px] lg:absolute lg:left-[23.75%] lg:top-[3.01%] lg:w-[20.73%] lg:max-w-none\">\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/products-juice-trio.webp\"\n          alt=\"\u0e02\u0e27\u0e14\u0e44\u0e0b\u0e23\u0e31\u0e1b\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e2a\u0e32\u0e21\u0e23\u0e2a\u0e0a\u0e32\u0e15\u0e34\"\n          class=\"block h-full w-full object-contain object-bottom\"\n          width=\"1082\"\n          height=\"933\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n      <\/div>\n\n      <!-- \u2500\u2500 LEFT CARD \u2014 \u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19 + \u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22\u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a 1 lockup (Figma 353:4485\n           + 353:4487 + Group 27). Flow content, top padding clears the trio.\n           EN \"Fruit Concentrate\" wraps to two lines at the Figma 40px scale and\n           stretches the aspect-locked card into the about-brand pill below, so\n           EN runs smaller to keep the one-line Figma lockup; TH stays Figma\n           (same per-language pattern as the about-brand pill). -->\n            <!-- Both cards centre their content at ~62% of their own height, which is\n           where Figma puts it (410:2888: the left card's copy spans 31%..97% of\n           the 450-high card, the right card's 28%..96% \u2014 both centred at ~62%,\n           i.e. BELOW the geometric middle, so the block clears the product photo\n           overlapping the top edge).\n           `lg:justify-center` with `pt 5.44cqw \/ pb 0` produces exactly that:\n           centring inside the padded box puts the midpoint at (H + pt)\/2, and the\n           card is 23.44cqw tall (28.54% wide \u00f7 the 548\/450 aspect), so\n           pt = 0.232 \u00d7 23.44. Driving it with top padding alone \u2014 the old\n           6.57cqw \u2014 pinned the TOP of the copy instead, so a card with less copy\n           just left the surplus at its foot: the right card sat at 53.5% with 16%\n           of dead green under it, and English (shorter heading) was worse still.\n           Centring makes every card and both languages land in the same place. -->\n\n      <div class=\"relative z-10 -mt-[6%] flex w-full flex-col items-center rounded-[clamp(18px,2.24cqw,43px)] bg-[#2c8446] px-[4%] pb-[6%] pt-[8%] text-center lg:absolute lg:left-[19.375%] lg:top-[32.19%] lg:mt-0 lg:aspect-[548\/450] lg:w-[28.54%] lg:justify-center lg:px-[1.5cqw] lg:pb-0 lg:pt-[5.44cqw]\">\n        <h2\n          class=\"df-card-heading font-accent leading-[1.1]\"\n          style=\"font-size: clamp(1.5rem, 3.333cqw, 4rem)\"\n        >\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19<\/h2>\n        <!-- stat lockup (Figma Group 27): mixed Sriracha \/ Kanit-Bold, white.\n             Figma's text boxes overlap heavily \u2014 measured against the card, the\n             glyph rows sit at 57.1% \/ 66.4% \/ 81.1% of its height, i.e. \u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22 and\n             \u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a are only 9.3% apart and the whole lockup spans 39% of the card.\n\n             The rows are driven by the 2.4em numerals: a unitless line-height is\n             inherited as a NUMBER, so `leading-[1.05]` on the row gave the numeral\n             a 2.4 \u00d7 1.05 = 2.52em line box and the Kanit baseline landed low\n             inside it \u2014 the lockup came out 1.39\u00d7 Figma's height and overran the\n             aspect-locked card by 26px. `leading-[0.62]` on the numerals shrinks\n             that box (they are 1 \/ 27, no descenders, and the rows are\n             items-baseline, so a sub-1 value moves the box, never the glyphs).\n\n             Leading alone only fixes the TOTAL height \u2014 it shrinks both gaps\n             together, while Figma wants them uneven: \u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22 sits tight above\n             \u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a (9.3%) and 27 \u0e1b\u0e35\u0e0b\u0e49\u0e2d\u0e19 hangs further below (14.7%).\n\n             Getting that rhythm needs Figma's actual arrangement, not three\n             centred rows. In the design \u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22 and \u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a are a RIGHT-ALIGNED\n             two-line stack whose edge lands on the card's centre (both end at\n             x\u2248644-648 of a card spanning 372..920) and the big 1 sits beside\n             them, starting at x=663 \u2014 so the numeral can rise past \u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22 without\n             touching it. Stacking them centred instead put the 1 directly under\n             \u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22, and pulling the rows tight enough to hit Figma's 9.3% made\n             the numeral collide with it. -->\n        <div class=\"mt-[0.3em] flex flex-col items-center text-white\" style=\"font-size: clamp(0.95rem, 2.083cqw, 2.5rem)\">\n          <span class=\"flex items-end justify-center gap-[0.28em]\">\n            <span class=\"flex flex-col items-end leading-[1.15]\">\n              <span class=\"font-accent\" style=\"font-size: 1.075em\">\u0e22\u0e2d\u0e14\u0e02\u0e32\u0e22<\/span>\n              <span class=\"font-display font-bold\">\u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a<\/span>\n            <\/span>\n            <span class=\"font-accent leading-[0.78]\" style=\"font-size: 2.4em\">1<\/span>\n            <span class=\"font-display font-bold\">\u0e01\u0e27\u0e48\u0e32<\/span>\n          <\/span>\n          <span class=\"flex items-baseline gap-[0.3em] leading-[1.05]\">\n            <span class=\"font-accent leading-[0.78]\" style=\"font-size: 2.4em\">27<\/span>\n            <span class=\"font-display font-bold\" style=\"font-size: 1.2em\">\u0e1b\u0e35\u0e0b\u0e49\u0e2d\u0e19<\/span>\n          <\/span>\n        <\/div>\n      <\/div>\n\n      <!-- \u2500\u2500 RIGHT: boba pack (Figma 353:4801) over its card. z-20. -->\n      <div class=\"pointer-events-none relative z-20 mt-[10%] aspect-[270\/311] w-[42%] max-w-[220px] lg:absolute lg:left-[59.64%] lg:top-[5.21%] lg:mt-0 lg:w-[14.06%] lg:max-w-none\">\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/products-boba-pack.webp\"\n          alt=\"\u0e16\u0e38\u0e07\u0e1a\u0e38\u0e01\u0e44\u0e02\u0e48\u0e21\u0e38\u0e01\u0e1a\u0e23\u0e32\u0e27\u0e19\u0e4c\u0e0a\u0e39\u0e01\u0e32\u0e23\u0e4c\u0e15\u0e23\u0e32\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\"\n          class=\"block h-full w-full object-contain object-bottom\"\n          width=\"633\"\n          height=\"731\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n      <\/div>\n\n      <!-- \u2500\u2500 RIGHT CARD \u2014 \u0e1a\u0e38\u0e01\u0e44\u0e02\u0e48\u0e21\u0e38\u0e01 \u0e40\u0e08\u0e49\u0e32\u0e41\u0e23\u0e01\u0e43\u0e19\u0e44\u0e17\u0e22 (Figma 353:4486 + Group 28 +\n           353:4491). The heading is ONE translatable string that wraps to the\n           Figma two-line lockup at frame width. -->\n      <div class=\"relative z-10 -mt-[6%] flex w-full flex-col items-center rounded-[clamp(18px,2.24cqw,43px)] bg-[#2c8446] px-[4%] pb-[6%] pt-[8%] text-center lg:absolute lg:left-[51.93%] lg:top-[32.19%] lg:mt-0 lg:aspect-[549\/450] lg:w-[28.59%] lg:justify-center lg:px-[1.5cqw] lg:pb-0 lg:pt-[5.44cqw]\">\n        <!-- Two strings, one per line (Figma Group 28 lockup): a single string\n             would re-wrap at Thai dictionary break points (\"\u2026\u0e43\u0e19|\u0e44\u0e17\u0e22\").\n             Shares $df_card_h_size with the left card \u2014 see the note there. -->\n        <h2\n          class=\"df-card-heading font-accent leading-[1.1]\"\n          style=\"font-size: clamp(1.5rem, 3.333cqw, 4rem)\"\n        >\u0e1a\u0e38\u0e01\u0e44\u0e02\u0e48\u0e21\u0e38\u0e01<br \/>\u0e40\u0e08\u0e49\u0e32\u0e41\u0e23\u0e01\u0e43\u0e19\u0e44\u0e17\u0e22<\/h2>\n        <!-- Figma 353:4491: Kanit Bold 36 over Kanit Regular 32 on the 1920 board\n             = 1.875cqw \/ 1.667cqw. Both ran small (1.6 \/ 1.25cqw = 85% \/ 75% of\n             the design) until 2026-08-04. The 0.9rem floor is the a11y floor for\n             white on #2c8446 and does not scale with them. -->\n        <p class=\"mt-[0.5em] w-full font-display leading-snug text-white\" style=\"font-size: clamp(0.9rem, 1.667cqw, 2rem)\">\n          <strong class=\"font-bold\" style=\"font-size: 1.125em\">\u0e1c\u0e25\u0e34\u0e15\u0e43\u0e19\u0e44\u0e17\u0e22\u0e40\u0e08\u0e49\u0e32\u0e41\u0e23\u0e01<\/strong><br \/>\n          \u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e39\u0e49\u0e1a\u0e38\u0e01\u0e40\u0e1a\u0e34\u0e01\u0e15\u0e25\u0e32\u0e14\u0e1a\u0e38\u0e01\u0e44\u0e02\u0e48\u0e21\u0e38\u0e01\u0e43\u0e19\u0e44\u0e17\u0e22        <\/p>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT BRAND \u2014 Figma 353:4913 (abot-us-3). Cream band, brand-meaning lockup.\n     Desktop (\u2265lg): byte-faithful absolute frame at aspect 1920\/740. Below lg:\n     normal-flow centered column (pill \u2192 circles+descriptions \u2192 brand line \u2192\n     logo \u2192 callouts); the connector lines hide. -->\n<section class=\"df-cream-field relative w-full\" data-about-brand>\n  <!-- Section heading for the document outline\/AT only \u2014 the visual heading is\n       the green pill lockup below, which is a styled <p> in the Figma frame. -->\n  <h2 class=\"sr-only\">\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07<\/h2>\n  <div class=\"@container relative mx-auto w-full max-w-(--df-frame-max)\">\n    <!-- inner frame: flow column on mobile, Figma-aspect absolute box on desktop -->\n    <div class=\"relative mx-auto flex w-[86%] flex-col items-center gap-[6cqw] py-[9cqw] lg:block lg:aspect-[1920\/740] lg:w-full lg:gap-0 lg:py-0\">\n\n      <!-- GREEN PILL heading (Figma 353:4972 + 353:4973). Sriracha white on a\n           horizontal green radial (dark centre \u2192 light edges). min-h (not fixed\n           h) so a wrapping translation grows the pill instead of overflowing it;\n           the EN copy wraps to 2 lines at frame width, so EN type runs slightly\n           smaller than the Figma 40px to clear the \u0e15\u0e34\u0e48\u0e07\/\u0e1f\u0e07 circles below\n           ($df_pill_size, set at the top of this file with the other sizes). -->\n      <div\n        class=\"relative z-10 flex w-full items-center justify-center rounded-full px-[4cqw] py-[2.5cqw] text-center lg:absolute lg:left-[25.99%] lg:top-[2.57%] lg:min-h-[11.62%] lg:w-[47.92%] lg:px-[2cqw] lg:py-[0.5cqw]\"\n        style=\"background: radial-gradient(ellipse 100% 160% at 50% 50%, #008555 0%, #309c5d 55%, #5fb264 100%)\"\n        data-reveal\n      >\n        <p class=\"font-accent leading-snug text-white\" style=\"font-size: clamp(1.05rem, 2.083cqw, 2.5rem)\">\u0e0a\u0e37\u0e48\u0e2d &quot;\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07&quot; \u0e21\u0e32\u0e08\u0e32\u0e01\u0e20\u0e32\u0e29\u0e32\u0e08\u0e35\u0e19 \u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e21\u0e07\u0e04\u0e25<\/p>\n      <\/div>\n\n      <!-- \u0e15\u0e34\u0e48\u0e07 circle + description (Figma 353:4963\/4964 + 353:4969).\n           EN \"Ding\"\/\"Fong\" run wider than the Thai glyphs and spill out of the\n           163\u00d8 circle at the Figma 5cqw scale, so EN runs smaller to stay\n           inside; TH keeps Figma (same per-language pattern as the pill). -->\n      <div class=\"relative z-10 flex aspect-square w-[30%] max-w-[110px] items-center justify-center rounded-full bg-gradient-to-b from-about-navy to-[#3E71B4] lg:absolute lg:left-[25.05%] lg:top-[17.97%] lg:w-[8.49%] lg:max-w-none\" data-reveal>\n        <span class=\"font-accent leading-none text-white\" style=\"font-size: clamp(1.9rem, 5cqw, 6rem)\">\u0e15\u0e34\u0e48\u0e07<\/span>\n      <\/div>\n      <p class=\"relative z-10 w-[86%] text-center font-display font-semibold leading-snug text-about-navy lg:absolute lg:left-[34.53%] lg:top-[23.24%] lg:w-[18%] lg:text-left\" style=\"font-size: clamp(0.95rem, 1.5625cqw, 1.9rem)\" data-reveal>\u0e2b\u0e21\u0e49\u0e2d\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e1e\u0e34\u0e18\u0e35\u0e09\u0e25\u0e2d\u0e07\u0e0a\u0e31\u0e22\u0e0a\u0e19\u0e30 \u0e2a\u0e37\u0e48\u0e2d\u0e16\u0e36\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08<\/p>\n\n      <!-- \u0e1f\u0e07 circle + description (Figma 353:4966\/4967 + 353:4970). -->\n      <div class=\"relative z-10 flex aspect-square w-[30%] max-w-[110px] items-center justify-center rounded-full bg-gradient-to-b from-about-navy to-[#3E71B4] lg:absolute lg:left-[53.91%] lg:top-[17.97%] lg:w-[8.49%] lg:max-w-none\" data-reveal>\n        <span class=\"font-accent leading-none text-white\" style=\"font-size: clamp(1.9rem, 5cqw, 6rem)\">\u0e1f\u0e07<\/span>\n      <\/div>\n      <p class=\"relative z-10 w-[86%] text-center font-display font-semibold leading-snug text-about-navy lg:absolute lg:left-[63.91%] lg:top-[23.24%] lg:w-[13.85%] lg:text-left\" style=\"font-size: clamp(0.95rem, 1.5625cqw, 1.9rem)\" data-reveal>\u0e04\u0e27\u0e32\u0e21\u0e40\u0e08\u0e23\u0e34\u0e0d\u0e23\u0e38\u0e48\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e07 \u0e41\u0e25\u0e30\u0e40\u0e1f\u0e37\u0e48\u0e2d\u0e07\u0e1f\u0e39<\/p>\n\n      <!-- Brand line (Figma 353:4968). Kanit Medium, green #008555, centered. -->\n      <p class=\"relative z-10 w-full text-center font-display font-medium leading-normal text-brand-green-700 lg:absolute lg:left-[32.29%] lg:top-[43.65%] lg:w-[35.89%]\" style=\"font-size: clamp(0.9rem, 1.146cqw, 1.4rem)\" data-reveal>\u0e0a\u0e37\u0e48\u0e2d\u0e41\u0e1a\u0e23\u0e19\u0e14\u0e4c\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48\u0e15\u0e23\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e41\u0e15\u0e48\u0e40\u0e1b\u0e47\u0e19 \u0e04\u0e33\u0e2d\u0e27\u0e22\u0e1e\u0e23\u0e43\u0e2b\u0e49\u0e17\u0e38\u0e01\u0e23\u0e49\u0e32\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e27\u0e14\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e27\u0e32\u0e07\u0e2d\u0e22\u0e39\u0e48 \u0e43\u0e2b\u0e49\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e23\u0e38\u0e48\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e07 \u0e0a\u0e35\u0e27\u0e34\u0e15\u0e21\u0e31\u0e48\u0e19\u0e04\u0e07 \u0e41\u0e25\u0e30\u0e40\u0e15\u0e47\u0e21\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02<\/p>\n\n      <!-- Colour logo (Figma 353:4914 \u2192 assets\/logo\/logo.svg). The node is the\n           white-sticker lockup, which is exactly the site-wide brand mark the\n           navbar\/footer already ship \u2014 so this points at the shared vector\n           instead of a private raster. The old brand-logo-color.webp was a bad\n           export of the same node: clipped at the left\/bottom edge (a stray\n           orange sliver on the frame edge) and carrying a dotted outline that\n           isn't in Figma. -->\n      <div class=\"relative z-10 aspect-[406\/304] w-[60%] max-w-[280px] lg:absolute lg:left-[39.375%] lg:top-[56.22%] lg:w-[21.15%] lg:max-w-none\" data-reveal>\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/logo\/logo.svg\"\n          alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 (Ding Fong)\"\n          class=\"block h-full w-full object-contain\"\n          width=\"406\"\n          height=\"304\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n      <\/div>\n\n      <!-- LEFT callout (Figma 353:4981 + 353:4980) \u2014 green dashed box, Sriracha ember. -->\n      <div class=\"relative z-10 flex w-[82%] items-center justify-center rounded-[4cqw] border-[3px] border-dashed border-[#51ac63] px-[3cqw] py-[3cqw] text-center lg:absolute lg:left-[18.49%] lg:top-[67.03%] lg:aspect-[332\/156] lg:w-[17.29%] lg:rounded-[1.15cqw] lg:px-[1cqw] lg:py-0\" data-reveal>\n        <p class=\"font-accent leading-normal text-[#ee7623]\" style=\"font-size: clamp(1rem, 1.875cqw, 2.25rem)\">\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e25\u0e42\u0e01\u0e49 \u0e17\u0e35\u0e48\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2a\u0e21\u0e37\u0e2d\u0e19\u0e2b\u0e21\u0e49\u0e2d<\/p>\n      <\/div>\n\n      <!-- RIGHT callout (Figma 353:4976 + 353:4977 + 353:4975). -->\n      <div class=\"relative z-10 flex w-[82%] flex-col items-center justify-center rounded-[4cqw] border-[3px] border-dashed border-[#51ac63] px-[3cqw] py-[3cqw] text-center lg:absolute lg:left-[65.68%] lg:top-[66.62%] lg:aspect-[332\/156] lg:w-[17.29%] lg:rounded-[1.15cqw] lg:px-[1cqw] lg:py-0\" data-reveal>\n        <p class=\"font-accent leading-normal text-[#ee7623]\" style=\"font-size: clamp(1rem, 1.875cqw, 2.25rem)\">\u201c\u0e2b\u0e22\u0e14\u0e19\u0e49\u0e33\u201d<\/p>\n        <p class=\"font-display font-semibold leading-snug text-about-navy\" style=\"font-size: clamp(0.875rem, 1.25cqw, 1.5rem)\">\u0e2a\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c \u0e02\u0e2d\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e14\u0e0a\u0e37\u0e48\u0e19 \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e40\u0e09\u0e25\u0e34\u0e21\u0e09\u0e25\u0e2d\u0e07<\/p>\n      <\/div>\n\n      <!-- Connector lines (Figma 353:4982 \/ 353:4978). Desktop only. -->\n      <div class=\"hidden border-t-[3px] border-dashed border-[#51ac63] lg:absolute lg:left-[35.63%] lg:top-[82.97%] lg:block lg:w-[4.69%]\" aria-hidden=\"true\"><\/div>\n      <div class=\"hidden border-t-[3px] border-dashed border-[#51ac63] lg:absolute lg:left-[60.16%] lg:top-[71.35%] lg:block lg:w-[5.63%]\" aria-hidden=\"true\"><\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT STANDARDS \u2014 Figma 330:3417. Cream band, centred column.\n============================================================================ -->\n<!-- abot-us-3: the top orange wave divider was removed \u2014 about-brand above is now\n     the same cream (#f8f3ed), so the band runs continuous. Corner fruit cut-outs\n     (Figma 353:5303\/5305\/5306\/5307) float via [data-fruit-float] (effects.js). -->\n<section class=\"df-cream-field relative z-[1] w-full\" data-about-standards>\n  <!-- \u2500\u2500 CORNER FRUITS (page-level nodes on abot-us-3, y-mapped into this band).\n       Desktop-only decoration, behind the content column. -->\n  <!-- Fruit insets pushed to the true gutters (Figma had them grazing the text\n       column below 1920): orange hugs the left edge and shrinks at lg; the two\n       right-side fruits show only \u2265xl where a real gutter exists. -->\n  <div class=\"pointer-events-none absolute left-[1.5%] top-[10%] z-0 hidden aspect-[324\/315] w-[10%] lg:block xl:w-[14%]\" aria-hidden=\"true\">\n    <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.5\">\n      <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-orange-2.webp\" alt=\"\" class=\"h-full w-full object-contain\" loading=\"lazy\" decoding=\"async\" \/>\n    <\/div>\n  <\/div>\n  <div class=\"pointer-events-none absolute left-[82%] top-[21%] z-0 hidden aspect-[189\/176] w-[9%] xl:block\" aria-hidden=\"true\">\n    <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.4\">\n      <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-leaves-2.webp\" alt=\"\" class=\"h-full w-full object-contain\" loading=\"lazy\" decoding=\"async\" \/>\n    <\/div>\n  <\/div>\n  <div class=\"pointer-events-none absolute left-[80.5%] top-[36%] z-0 hidden aspect-[254\/202] w-[11.5%] xl:block\" aria-hidden=\"true\">\n    <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.6\">\n      <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-blueberries.webp\" alt=\"\" class=\"h-full w-full object-contain\" loading=\"lazy\" decoding=\"async\" \/>\n    <\/div>\n  <\/div>\n  <!-- Strawberry (353:5305, page 320,3402): Figma shows it ~85% visible, poking\n       out from the FIRST card's bottom-left corner (only the top-right tip\n       tucks behind the card). This block is normal-flow, so a top-% anchor\n       drifts with real text height and buried it mid-card \u2014 anchor to the\n       SECTION BOTTOM instead: the cards grid ends a fixed 3.6cqw (column pb)\n       above it, so the strawberry-to-card-bottom relation stays Figma-true at\n       any content height. It bleeds ~4cqw into the next band (same cream);\n       the section's z-[1] keeps that sliver above the later sibling. -->\n  <div class=\"pointer-events-none absolute bottom-[-3.8cqw] left-[16.67%] z-0 hidden aspect-[188\/177] w-[9.79%] lg:block\" aria-hidden=\"true\">\n    <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.55\">\n      <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-strawberry-2.webp\" alt=\"\" class=\"h-full w-full object-contain\" loading=\"lazy\" decoding=\"async\" \/>\n    <\/div>\n  <\/div>\n  <!-- data-reveal sits HERE, not on the <section>: the section IS the cream band\n       (df-cream-field), so fading it faded the band itself and the body's orange\n       + gold line-art showed through for the whole 0.85s transition. Only the\n       content column animates; the band and the corner fruit stay put. -->\n  <div class=\"@container relative mx-auto w-full\" data-reveal=\"fade\">\n    <div class=\"relative mx-auto flex w-[92%] max-w-[1073px] flex-col items-center px-[2%] pb-[8%] pt-[8%] lg:px-0 lg:pb-[3.6cqw] lg:pt-[3.6cqw]\">\n\n      <!-- HEADING \"\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15\" \u2014 curved Sriracha (330:3418). -->\n      <div class=\"relative aspect-[1060\/132] w-[96%] max-w-[880px] lg:w-[62%]\">\n        <h2 class=\"sr-only\">\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15<\/h2>\n        <svg\n          class=\"curved-heading absolute inset-0 h-full w-full\"\n          viewBox=\"0 0 1060 132\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <path id=\"df-standards-curve\" fill=\"none\" d=\"M 96 96 Q 530 60 964 96\" \/>\n          <\/defs>\n          <text text-anchor=\"middle\">\n            <textPath href=\"#df-standards-curve\" startOffset=\"50%\">\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15<\/textPath>\n          <\/text>\n        <\/svg>\n        <!-- flanking leaf + dot (green leaf \/ orange dot), mirrored on the right. -->\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-0 top-[42%] h-[30%] w-[8%]\" \/>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[3%] top-[12%] h-[20%] w-[3.2%]\" \/>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[92%] top-[42%] h-[30%] w-[8%] -scale-x-100\" \/>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[93.8%] top-[12%] h-[20%] w-[3.2%] -scale-x-100\" \/>\n      <\/div>\n\n      <!-- INTRO (330:3488) \u2014 cobalt, centred. Measure capped ~70ch (Figma's full\n           1073px ran ~99ch\/line \u2014 unreadable) so the column also clears the\n           corner-fruit decoration at every desktop width. -->\n      <p class=\"mt-[5%] w-full max-w-[760px] text-center font-body leading-relaxed text-brand-blue [text-wrap:pretty] lg:mt-[2cqw]\" style=\"font-size: clamp(0.88rem, 1.5cqw, 1.35rem)\">\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e39\u0e49\u0e1c\u0e25\u0e34\u0e15\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19\u0e2d\u0e31\u0e19\u0e14\u0e31\u0e1a 1 \u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e32\u0e01\u0e25\u0e17\u0e31\u0e49\u0e07 ISO, GHPs, HALAL \u0e41\u0e25\u0e30 CODEX \u0e42\u0e14\u0e22\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1c\u0e48\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e41\u0e15\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e41\u0e25\u0e30\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e32\u0e27\u0e19\u0e32\u0e19 \u0e1c\u0e25\u0e34\u0e15\u0e20\u0e31\u0e13\u0e11\u0e4c\u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e40\u0e02\u0e49\u0e21\u0e02\u0e49\u0e19 (Concentrated fruit syrup) \u0e44\u0e0b\u0e23\u0e31\u0e1b \u0e1c\u0e07\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21 \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07\u0e17\u0e47\u0e2d\u0e1b\u0e1b\u0e34\u0e49\u0e07\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e23\u0e49\u0e32\u0e19\u0e40\u0e25\u0e47\u0e01\u0e23\u0e34\u0e21\u0e17\u0e32\u0e07\u0e08\u0e19\u0e16\u0e36\u0e07\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 \u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23 \u0e04\u0e32\u0e40\u0e1f\u0e48 \u0e41\u0e25\u0e30\u0e41\u0e1f\u0e23\u0e19\u0e44\u0e0a\u0e2a\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e17\u0e31\u0e48\u0e27\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28<\/p>\n\n      <!-- SUB-HEADING (330:3489) \u2014 orange Sriracha, white halo for legibility on cream. -->\n      <p class=\"mt-[6%] text-center font-accent italic leading-tight text-[#ee7623] [text-shadow:0_2px_0_#fff,0_-2px_0_#fff,2px_0_0_#fff,-2px_0_0_#fff,0_0_6px_rgba(255,255,255,0.85)] lg:mt-[2.6cqw]\" style=\"font-size: clamp(1.4rem, 2.7cqw, 2.4rem)\">\u201c\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e04\u0e34\u0e14 \u0e41\u0e25\u0e30 \u0e17\u0e33\u201d<\/p>\n\n      <!-- THREE CARDS (330:3490 \/ 3497 \/ 3504) \u2014 header pill + body, equal heights. -->\n      <!-- Mobile row gap in rem, not % (audit 2026-07-25): a percentage ROW gap on\n           a 1-col grid resolves against the grid's own height (cyclic), so the\n           browser laid the cards out with the gaps but sized the section without\n           them \u2014 the last card overflowed the section bottom and covered the next\n           band's \"\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\" heading. sm+ is 3-col\/1-row where the % gap is a column\n           gap (resolves against width) and stays as designed. -->\n      <div class=\"mt-[6%] grid w-full grid-cols-1 gap-y-10 sm:grid-cols-3 sm:gap-[3%] sm:gap-y-0 lg:mt-[2.6cqw]\">\n\n                <div class=\"flex h-full flex-col items-center\" data-reveal data-reveal-delay=\"0ms\">\n          <!-- header pill (432:3164) \u2014 r50 on an 84-tall rect is a full pill, so\n               rounded-full holds the shape at any card height. The fill is\n               Figma's radial gradient: an ellipse exactly the size of the rect\n               (rx 160\/ry 42 about its centre), dark core out to a lighter rim. -->\n          <div\n            class=\"flex min-h-[3.6em] w-[92%] items-center justify-center rounded-full px-[6%] py-[0.4em] text-center\"\n            style=\"background-image: radial-gradient(ellipse 50% 50% at 50% 50%, #008555 0%, #0c8b57 12.5%, #189059 25%, #309c5d 50%, #47a760 75%, #5fb264 100%)\"\n          >\n            <!-- font-family is inline, not the `font-accent` utility: theme.json\n                 makes WordPress emit an UNLAYERED `h1..h6{font-family:kanit}` in\n                 global-styles-inline-css, and unlayered CSS outranks every\n                 cascade layer \u2014 so `font-accent` is a silent no-op on any\n                 heading (about-culture's h3 is Kanit today for the same reason).\n                 Only an inline declaration reliably wins here. -->\n            <h3 class=\"leading-tight tracking-[0.01em] text-white [text-wrap:balance]\" style=\"font-family: var(--font-accent); font-size: clamp(1.05rem, 1.25cqw, 1.5rem)\">\u0e08\u0e38\u0e14\u0e01\u0e33\u0e40\u0e19\u0e34\u0e14\u0e08\u0e32\u0e01\u0e04\u0e27\u0e32\u0e21\u0e15\u0e31\u0e49\u0e07\u0e43\u0e08\u0e14\u0e35<\/h3>\n          <\/div>\n          <!-- connector stems (432:3168\/3169) \u2014 the gradient's dark core colour -->\n          <div class=\"flex w-[92%] justify-between px-[16%]\" aria-hidden=\"true\">\n            <span class=\"h-[0.7em] w-[0.5em] bg-[#008555]\"><\/span>\n            <span class=\"h-[0.7em] w-[0.5em] bg-[#008555]\"><\/span>\n          <\/div>\n          <!-- body (432:3165) \u2014 r21 of a 1920 artboard = 1.09cqw; the wider\n               mobile radius keeps the corner proportional once a card goes\n               full-width. -->\n          <div class=\"flex w-[92%] flex-1 items-start justify-center rounded-[2.4cqw] bg-[#51ac63] px-[8%] py-[6%] text-center sm:rounded-[1.09cqw]\">\n            <p class=\"font-display leading-relaxed text-white\" style=\"font-size: clamp(0.95rem, 1.0417cqw, 1.25rem)\">\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e2d\u0e22\u0e32\u0e01\u0e02\u0e32\u0e22\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e41\u0e15\u0e48\u0e40\u0e23\u0e34\u0e48\u0e21\u0e08\u0e32\u0e01\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e23\u0e32\u0e23\u0e16\u0e19\u0e32\u0e17\u0e35\u0e48\u0e08\u0e30\u0e21\u0e2d\u0e1a \u201c\u0e42\u0e2d\u0e01\u0e32\u0e2a\u201d \u0e43\u0e2b\u0e49\u0e17\u0e38\u0e01\u0e04\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e44\u0e14\u0e49\u0e14\u0e49\u0e27\u0e22\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e DNA \u0e19\u0e35\u0e49\u0e1d\u0e31\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e17\u0e38\u0e01\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e41\u0e1a\u0e23\u0e19\u0e14\u0e4c\u0e17\u0e33 \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2a\u0e39\u0e15\u0e23 \u0e01\u0e32\u0e23\u0e2a\u0e2d\u0e19\u0e0a\u0e07 \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e23\u0e32\u0e04\u0e32\u0e17\u0e35\u0e48\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e44\u0e14\u0e49<\/p>\n          <\/div>\n        <\/div>\n                <div class=\"flex h-full flex-col items-center\" data-reveal data-reveal-delay=\"120ms\">\n          <!-- header pill (432:3164) \u2014 r50 on an 84-tall rect is a full pill, so\n               rounded-full holds the shape at any card height. The fill is\n               Figma's radial gradient: an ellipse exactly the size of the rect\n               (rx 160\/ry 42 about its centre), dark core out to a lighter rim. -->\n          <div\n            class=\"flex min-h-[3.6em] w-[92%] items-center justify-center rounded-full px-[6%] py-[0.4em] text-center\"\n            style=\"background-image: radial-gradient(ellipse 50% 50% at 50% 50%, #008555 0%, #0c8b57 12.5%, #189059 25%, #309c5d 50%, #47a760 75%, #5fb264 100%)\"\n          >\n            <!-- font-family is inline, not the `font-accent` utility: theme.json\n                 makes WordPress emit an UNLAYERED `h1..h6{font-family:kanit}` in\n                 global-styles-inline-css, and unlayered CSS outranks every\n                 cascade layer \u2014 so `font-accent` is a silent no-op on any\n                 heading (about-culture's h3 is Kanit today for the same reason).\n                 Only an inline declaration reliably wins here. -->\n            <h3 class=\"leading-tight tracking-[0.01em] text-white [text-wrap:balance]\" style=\"font-family: var(--font-accent); font-size: clamp(1.05rem, 1.25cqw, 1.5rem)\">\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32 \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e1a\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07<\/h3>\n          <\/div>\n          <!-- connector stems (432:3168\/3169) \u2014 the gradient's dark core colour -->\n          <div class=\"flex w-[92%] justify-between px-[16%]\" aria-hidden=\"true\">\n            <span class=\"h-[0.7em] w-[0.5em] bg-[#008555]\"><\/span>\n            <span class=\"h-[0.7em] w-[0.5em] bg-[#008555]\"><\/span>\n          <\/div>\n          <!-- body (432:3165) \u2014 r21 of a 1920 artboard = 1.09cqw; the wider\n               mobile radius keeps the corner proportional once a card goes\n               full-width. -->\n          <div class=\"flex w-[92%] flex-1 items-start justify-center rounded-[2.4cqw] bg-[#51ac63] px-[8%] py-[6%] text-center sm:rounded-[1.09cqw]\">\n            <p class=\"font-display leading-relaxed text-white\" style=\"font-size: clamp(0.95rem, 1.0417cqw, 1.25rem)\">\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07 ISO, GHPs, HALAL \u0e41\u0e25\u0e30 CODEX \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1c\u0e48\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e41\u0e15\u0e48\u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e04\u0e37\u0e2d\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e2a\u0e21\u0e04\u0e27\u0e23\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a \u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e04\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e01\u0e31\u0e1a\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e41\u0e25\u0e30\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19<\/p>\n          <\/div>\n        <\/div>\n                <div class=\"flex h-full flex-col items-center\" data-reveal data-reveal-delay=\"240ms\">\n          <!-- header pill (432:3164) \u2014 r50 on an 84-tall rect is a full pill, so\n               rounded-full holds the shape at any card height. The fill is\n               Figma's radial gradient: an ellipse exactly the size of the rect\n               (rx 160\/ry 42 about its centre), dark core out to a lighter rim. -->\n          <div\n            class=\"flex min-h-[3.6em] w-[92%] items-center justify-center rounded-full px-[6%] py-[0.4em] text-center\"\n            style=\"background-image: radial-gradient(ellipse 50% 50% at 50% 50%, #008555 0%, #0c8b57 12.5%, #189059 25%, #309c5d 50%, #47a760 75%, #5fb264 100%)\"\n          >\n            <!-- font-family is inline, not the `font-accent` utility: theme.json\n                 makes WordPress emit an UNLAYERED `h1..h6{font-family:kanit}` in\n                 global-styles-inline-css, and unlayered CSS outranks every\n                 cascade layer \u2014 so `font-accent` is a silent no-op on any\n                 heading (about-culture's h3 is Kanit today for the same reason).\n                 Only an inline declaration reliably wins here. -->\n            <h3 class=\"leading-tight tracking-[0.01em] text-white [text-wrap:balance]\" style=\"font-family: var(--font-accent); font-size: clamp(1.05rem, 1.25cqw, 1.5rem)\">\u0e1e\u0e32\u0e23\u0e4c\u0e17\u0e40\u0e19\u0e2d\u0e23\u0e4c \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48\u0e0b\u0e31\u0e1e\u0e1e\u0e25\u0e32\u0e22\u0e40\u0e2d\u0e2d\u0e23\u0e4c<\/h3>\n          <\/div>\n          <!-- connector stems (432:3168\/3169) \u2014 the gradient's dark core colour -->\n          <div class=\"flex w-[92%] justify-between px-[16%]\" aria-hidden=\"true\">\n            <span class=\"h-[0.7em] w-[0.5em] bg-[#008555]\"><\/span>\n            <span class=\"h-[0.7em] w-[0.5em] bg-[#008555]\"><\/span>\n          <\/div>\n          <!-- body (432:3165) \u2014 r21 of a 1920 artboard = 1.09cqw; the wider\n               mobile radius keeps the corner proportional once a card goes\n               full-width. -->\n          <div class=\"flex w-[92%] flex-1 items-start justify-center rounded-[2.4cqw] bg-[#51ac63] px-[8%] py-[6%] text-center sm:rounded-[1.09cqw]\">\n            <p class=\"font-display leading-relaxed text-white\" style=\"font-size: clamp(0.95rem, 1.0417cqw, 1.25rem)\">\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e27\u0e32\u0e07\u0e15\u0e31\u0e27\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e23\u0e48\u0e27\u0e21\u0e17\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e01\u0e32\u0e23 \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e23\u0e49\u0e32\u0e19\u0e40\u0e25\u0e47\u0e01\u0e23\u0e34\u0e21\u0e17\u0e32\u0e07\u0e08\u0e19\u0e16\u0e36\u0e07\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21\u0e41\u0e25\u0e30\u0e41\u0e1f\u0e23\u0e19\u0e44\u0e0a\u0e2a\u0e4c \u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1c\u0e25\u0e34\u0e15\u0e20\u0e31\u0e13\u0e11\u0e4c\u0e43\u0e2b\u0e21\u0e48 \u0e23\u0e2a\u0e0a\u0e32\u0e15\u0e34\u0e43\u0e2b\u0e21\u0e48 \u0e41\u0e25\u0e30\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a\u0e2b\u0e25\u0e32\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c\u0e40\u0e21\u0e19\u0e39\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e21\u0e48\u0e23\u0e39\u0e49\u0e08\u0e1a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e48\u0e2d\u0e22\u0e2d\u0e14\u0e01\u0e34\u0e08\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19<\/p>\n          <\/div>\n        <\/div>\n        \n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT HAPPINESS \u2014 Figma 353:5077 (abot-us-3). Cream band, green arch tiles,\n     bottom wave into the orange beliefs band.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-happiness>\n  <div class=\"df-cream-field\">\n    <!-- data-reveal sits HERE, not on the <section>: the section wraps BOTH the\n         cream band above and the bottom transition wave, so fading the section\n         faded the band and the page's orange field flashed through under the\n         standards cards (the reported symptom). Only the content column moves. -->\n    <div class=\"@container relative mx-auto w-full\" data-reveal=\"fade\">\n      <div class=\"relative mx-auto flex w-[94%] max-w-[1073px] flex-col items-center px-[2%] pb-[8%] pt-[4%] lg:px-0 lg:pb-[2.4cqw] lg:pt-[1.2cqw]\">\n\n        <!-- HEADING \"\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\" (353:5079) \u2014 green Sriracha with white halo. -->\n        <h2 class=\"text-center font-accent italic leading-tight text-brand-green-700 [text-shadow:0_2px_0_#fff,0_-2px_0_#fff,2px_0_0_#fff,-2px_0_0_#fff,0_0_6px_rgba(255,255,255,0.8)]\" style=\"font-size: clamp(2rem, 5cqw, 4rem)\">\u201c\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u201d<\/h2>\n\n        <!-- DEFINITION line (353:5078) \u2014 navy on cream, new abot-us-3 copy.\n             text-wrap:balance, not a per-language size: this <p> has no max-w, so\n             at 1440 it runs the full 1073px column. Thai fits on one line (866px);\n             English needs two and broke 966 + 129, an orphan. Shrinking to fit one\n             line takes only ~0.955\u00d7 \u2014 too fine a margin to hold \u2014 and a 100-character\n             line is poor measure even when it fits. balance evens the two English\n             lines and is a no-op on Thai's single line. A max-w would be the textbook\n             fix but would wrap the Thai line too, i.e. a \/th\/ regression. -->\n        <p class=\"mt-[2%] text-center font-body leading-relaxed text-about-navy [text-wrap:balance]\" style=\"font-size: clamp(0.9rem, 1.5cqw, 1.35rem)\">\u0e19\u0e34\u0e22\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e43\u0e19\u0e1a\u0e23\u0e34\u0e1a\u0e17\u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e04\u0e48\u0e04\u0e33\u0e2b\u0e27\u0e32\u0e19 \u0e41\u0e15\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e08\u0e32\u0e01 3 \u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e19\u0e35\u0e49<\/p>\n\n        <!-- THREE GREEN ARCH TILES + two blue \"+\" connectors. -->\n        <div class=\"mt-[6%] flex w-full items-stretch justify-center gap-[1.5%] lg:mt-[2.6cqw]\">\n\n                                  <!-- arch tile: semicircle top, green gradient, circle-clipped badge, white label.\n                 Bottom stop darkened #1ea54c \u2192 #15803c (audit 2026-07-25): the white\n                 label sits on the gradient's bottom end, where #1ea54c held it at only\n                 ~3.2:1 against the 13.6px floor; #15803c clears 4.5:1. The light top\n                 stop is unchanged (covered by the badge circle, no text). -->\n            <!-- Corner radii, Figma 353:5083 on its 215-wide tile: 107.5 top (a\n                 true semicircle, exactly half the width) and 30 bottom = 13.95%.\n                 The tile is `29% capped at 215px`, and the row's widths\n                 over-subscribe 100% so flex shrinks it to a measured 24.6% of the\n                 container until the cap takes over \u2014 hence the min() pairs, which\n                 track Figma's ratios below the cap and freeze at its pixel values\n                 above it (they cross at 875px).\n\n                 The top MUST be a real half-width, not rounded-t-full. When the\n                 radii along any side add up to more than that side, CSS scales\n                 EVERY corner by one shared factor. rounded-t-full is ~3.36e7px, so\n                 the factor came out at 215\/(2 \u00d7 3.36e7) \u2248 3.2e-6: the top still\n                 rendered as the correct 107.4 semicircle, but it dragged the\n                 bottom's 30px down to 0.0001px \u2014 square corners. Nothing in\n                 getComputedStyle shows this; it reports the SPECIFIED 30px either\n                 way. With both sides declared, the top edge sums to exactly the\n                 width, the factor is 1, and both radii paint as written. -->\n            <div class=\"flex w-[29%] max-w-[215px] flex-col items-center rounded-b-[min(3.43cqw,30px)] rounded-t-[min(12.3cqw,107.5px)] bg-gradient-to-b from-[#82c33f] to-[#15803c] shadow-[0_5px_16px_rgba(0,0,0,0.10)]\" data-reveal data-reveal-delay=\"0ms\">\n              <!-- Badge disc (Figma Ellipse 3, 429:3592): 201 of the tile's 215\n                   = 93.49%, inset 10 from the top = 4.65% \u2014 both percentages of the\n                   tile, so they hold at the capped 215px AND below it.\n                   The gradient IS the Figma circle: r=100.5 from #F0B529 at the\n                   centre to #EE7623 at the rim. `closest-side` is what makes that\n                   exact \u2014 the default farthest-corner would run the ramp out to\n                   0.707\u00d7 the box and land the rim colour off the visible edge.\n                   rounded-full still matters: a radial gradient paints its end\n                   colour across the whole box, so the square corners need clipping.\n                   Figma has no white ring here \u2014 the orange meets the green\n                   directly, which is now true by construction. -->\n              <span class=\"relative mt-[4.65%] block aspect-square w-[93.49%] rounded-full bg-[radial-gradient(circle_closest-side_at_50%_50%,#F0B529_0%,#EE7623_100%)]\">\n                <img\n                  src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/logo\/logo.svg\"\n                  alt=\"\"\n                  aria-hidden=\"true\"\n                  class=\"absolute max-w-none left-[13.44%] top-[17.91%] w-[73.58%]\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                \/>\n              <\/span>\n              <div class=\"flex flex-1 items-center justify-center px-[4%] pb-[10%] pt-[6%]\">\n                <h3 class=\"text-center font-accent leading-tight text-white\" style=\"font-size: clamp(0.875rem, 1.667cqw, 1.6rem)\">\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32<\/h3>\n              <\/div>\n            <\/div>\n                                    <!-- blue \"+\" (353:5080 \/ 353:5081), aligned to the badge circle\n                   centre. This is Figma's vector, not a typed \"+\": the glyph is\n                   a hand-drawn plus with rounded, unequal arms and a slight\n                   rotation, none of which a font's plus has. Both Figma nodes\n                   export the same path, so both connectors share one file.\n                   44 of the 1920 artboard = 2.29cqw, frozen at Figma's own 44px\n                   once the content column stops growing. -->\n              <div class=\"flex w-[6%] shrink-0 justify-center pt-[9%]\" aria-hidden=\"true\">\n                <img\n                  src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/happiness-plus.svg\"\n                  alt=\"\"\n                                    class=\"h-auto max-w-none self-start\"\n                  style=\"width: clamp(0.9rem, 2.29cqw, 2.75rem)\"\n                  width=\"44\"\n                  height=\"40\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                \/>\n              <\/div>\n                        <!-- arch tile: semicircle top, green gradient, circle-clipped badge, white label.\n                 Bottom stop darkened #1ea54c \u2192 #15803c (audit 2026-07-25): the white\n                 label sits on the gradient's bottom end, where #1ea54c held it at only\n                 ~3.2:1 against the 13.6px floor; #15803c clears 4.5:1. The light top\n                 stop is unchanged (covered by the badge circle, no text). -->\n            <!-- Corner radii, Figma 353:5083 on its 215-wide tile: 107.5 top (a\n                 true semicircle, exactly half the width) and 30 bottom = 13.95%.\n                 The tile is `29% capped at 215px`, and the row's widths\n                 over-subscribe 100% so flex shrinks it to a measured 24.6% of the\n                 container until the cap takes over \u2014 hence the min() pairs, which\n                 track Figma's ratios below the cap and freeze at its pixel values\n                 above it (they cross at 875px).\n\n                 The top MUST be a real half-width, not rounded-t-full. When the\n                 radii along any side add up to more than that side, CSS scales\n                 EVERY corner by one shared factor. rounded-t-full is ~3.36e7px, so\n                 the factor came out at 215\/(2 \u00d7 3.36e7) \u2248 3.2e-6: the top still\n                 rendered as the correct 107.4 semicircle, but it dragged the\n                 bottom's 30px down to 0.0001px \u2014 square corners. Nothing in\n                 getComputedStyle shows this; it reports the SPECIFIED 30px either\n                 way. With both sides declared, the top edge sums to exactly the\n                 width, the factor is 1, and both radii paint as written. -->\n            <div class=\"flex w-[29%] max-w-[215px] flex-col items-center rounded-b-[min(3.43cqw,30px)] rounded-t-[min(12.3cqw,107.5px)] bg-gradient-to-b from-[#82c33f] to-[#15803c] shadow-[0_5px_16px_rgba(0,0,0,0.10)]\" data-reveal data-reveal-delay=\"120ms\">\n              <!-- Badge disc (Figma Ellipse 3, 429:3592): 201 of the tile's 215\n                   = 93.49%, inset 10 from the top = 4.65% \u2014 both percentages of the\n                   tile, so they hold at the capped 215px AND below it.\n                   The gradient IS the Figma circle: r=100.5 from #F0B529 at the\n                   centre to #EE7623 at the rim. `closest-side` is what makes that\n                   exact \u2014 the default farthest-corner would run the ramp out to\n                   0.707\u00d7 the box and land the rim colour off the visible edge.\n                   rounded-full still matters: a radial gradient paints its end\n                   colour across the whole box, so the square corners need clipping.\n                   Figma has no white ring here \u2014 the orange meets the green\n                   directly, which is now true by construction. -->\n              <span class=\"relative mt-[4.65%] block aspect-square w-[93.49%] rounded-full bg-[radial-gradient(circle_closest-side_at_50%_50%,#F0B529_0%,#EE7623_100%)]\">\n                <img\n                  src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/happiness-icon-2.svg\"\n                  alt=\"\"\n                  aria-hidden=\"true\"\n                  class=\"absolute max-w-none left-[14.93%] top-[16.42%] w-[71.64%]\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                \/>\n              <\/span>\n              <div class=\"flex flex-1 items-center justify-center px-[4%] pb-[10%] pt-[6%]\">\n                <h3 class=\"text-center font-accent leading-tight text-white\" style=\"font-size: clamp(0.875rem, 1.667cqw, 1.6rem)\">\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/h3>\n              <\/div>\n            <\/div>\n                                    <!-- blue \"+\" (353:5080 \/ 353:5081), aligned to the badge circle\n                   centre. This is Figma's vector, not a typed \"+\": the glyph is\n                   a hand-drawn plus with rounded, unequal arms and a slight\n                   rotation, none of which a font's plus has. Both Figma nodes\n                   export the same path, so both connectors share one file.\n                   44 of the 1920 artboard = 2.29cqw, frozen at Figma's own 44px\n                   once the content column stops growing. -->\n              <div class=\"flex w-[6%] shrink-0 justify-center pt-[9%]\" aria-hidden=\"true\">\n                <img\n                  src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/happiness-plus.svg\"\n                  alt=\"\"\n                                    class=\"h-auto max-w-none self-start\"\n                  style=\"width: clamp(0.9rem, 2.29cqw, 2.75rem)\"\n                  width=\"44\"\n                  height=\"40\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                \/>\n              <\/div>\n                        <!-- arch tile: semicircle top, green gradient, circle-clipped badge, white label.\n                 Bottom stop darkened #1ea54c \u2192 #15803c (audit 2026-07-25): the white\n                 label sits on the gradient's bottom end, where #1ea54c held it at only\n                 ~3.2:1 against the 13.6px floor; #15803c clears 4.5:1. The light top\n                 stop is unchanged (covered by the badge circle, no text). -->\n            <!-- Corner radii, Figma 353:5083 on its 215-wide tile: 107.5 top (a\n                 true semicircle, exactly half the width) and 30 bottom = 13.95%.\n                 The tile is `29% capped at 215px`, and the row's widths\n                 over-subscribe 100% so flex shrinks it to a measured 24.6% of the\n                 container until the cap takes over \u2014 hence the min() pairs, which\n                 track Figma's ratios below the cap and freeze at its pixel values\n                 above it (they cross at 875px).\n\n                 The top MUST be a real half-width, not rounded-t-full. When the\n                 radii along any side add up to more than that side, CSS scales\n                 EVERY corner by one shared factor. rounded-t-full is ~3.36e7px, so\n                 the factor came out at 215\/(2 \u00d7 3.36e7) \u2248 3.2e-6: the top still\n                 rendered as the correct 107.4 semicircle, but it dragged the\n                 bottom's 30px down to 0.0001px \u2014 square corners. Nothing in\n                 getComputedStyle shows this; it reports the SPECIFIED 30px either\n                 way. With both sides declared, the top edge sums to exactly the\n                 width, the factor is 1, and both radii paint as written. -->\n            <div class=\"flex w-[29%] max-w-[215px] flex-col items-center rounded-b-[min(3.43cqw,30px)] rounded-t-[min(12.3cqw,107.5px)] bg-gradient-to-b from-[#82c33f] to-[#15803c] shadow-[0_5px_16px_rgba(0,0,0,0.10)]\" data-reveal data-reveal-delay=\"240ms\">\n              <!-- Badge disc (Figma Ellipse 3, 429:3592): 201 of the tile's 215\n                   = 93.49%, inset 10 from the top = 4.65% \u2014 both percentages of the\n                   tile, so they hold at the capped 215px AND below it.\n                   The gradient IS the Figma circle: r=100.5 from #F0B529 at the\n                   centre to #EE7623 at the rim. `closest-side` is what makes that\n                   exact \u2014 the default farthest-corner would run the ramp out to\n                   0.707\u00d7 the box and land the rim colour off the visible edge.\n                   rounded-full still matters: a radial gradient paints its end\n                   colour across the whole box, so the square corners need clipping.\n                   Figma has no white ring here \u2014 the orange meets the green\n                   directly, which is now true by construction. -->\n              <span class=\"relative mt-[4.65%] block aspect-square w-[93.49%] rounded-full bg-[radial-gradient(circle_closest-side_at_50%_50%,#F0B529_0%,#EE7623_100%)]\">\n                <img\n                  src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/happiness-icon-3.svg\"\n                  alt=\"\"\n                  aria-hidden=\"true\"\n                  class=\"absolute max-w-none inset-0 h-full w-full\"\n                  loading=\"lazy\"\n                  decoding=\"async\"\n                \/>\n              <\/span>\n              <div class=\"flex flex-1 items-center justify-center px-[4%] pb-[10%] pt-[6%]\">\n                <h3 class=\"text-center font-accent leading-tight text-white\" style=\"font-size: clamp(0.875rem, 1.667cqw, 1.6rem)\">\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e02\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e04\u0e19<\/h3>\n              <\/div>\n            <\/div>\n          \n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 BOTTOM WAVE (Figma Vector 13) \u2014 cream above the curve, transparent\n       below \u2192 the orange page field of the beliefs band shows through. -->\n  <img decoding=\"async\"\n    src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-wave-cream-2.svg\"\n    alt=\"\"\n    aria-hidden=\"true\"\n    loading=\"lazy\"\n    class=\"pointer-events-none relative z-[1] block w-full h-[clamp(24px,4.27vw,82px)]\"\n  \/>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT BELIEFS \u2014 Figma 330:3585. Transparent orange band, white card.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-beliefs data-reveal=\"fade\">\n  <!-- \u2500\u2500 CORNER FRUITS (abot-us-3 page-level nodes 353:5304 \/ 353:5308,\n       y-mapped into this band). Desktop-only decoration, behind the card. -->\n  <div class=\"pointer-events-none absolute left-[81.2%] top-[20%] z-0 hidden aspect-[301\/290] w-[15.68%] lg:block\" aria-hidden=\"true\">\n    <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.6\">\n      <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-strawberry-1.webp\" alt=\"\" class=\"h-full w-full object-contain\" loading=\"lazy\" decoding=\"async\" \/>\n    <\/div>\n  <\/div>\n  <div class=\"pointer-events-none absolute left-[76.3%] top-[78%] z-0 hidden aspect-[220\/212] w-[11.46%] lg:block\" aria-hidden=\"true\">\n    <div class=\"absolute inset-0\" data-fruit-float data-fruit-depth=\"0.45\">\n      <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/fruit-leaves-2.webp\" alt=\"\" class=\"h-full w-full -scale-x-100 object-contain\" loading=\"lazy\" decoding=\"async\" \/>\n    <\/div>\n  <\/div>\n  <div class=\"@container relative mx-auto w-full\">\n    <div class=\"relative mx-auto w-[94%] max-w-[1073px] px-[1%] pb-[4%] pt-[8%] lg:pt-[3cqw]\">\n\n      <!-- HEADING (330:3587) \u2014 green Sriracha, quoted \u201c\u0e40\u0e23\u0e32\u201d in orange, white halo.\n           Straddles the card top edge. -->\n      <h2 class=\"relative z-10 text-center font-accent italic leading-tight [text-shadow:0_2px_0_#fff,0_-2px_0_#fff,2px_0_0_#fff,-2px_0_0_#fff,0_0_7px_rgba(255,255,255,0.85)]\" style=\"font-size: clamp(1.6rem, 4cqw, 3.2rem)\"><span class=\"text-brand-green-700\">\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48<\/span> <span class=\"text-[#ee7623]\">\u201c\u0e40\u0e23\u0e32\u201d<\/span> <span class=\"text-brand-green-700\">\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e31\u0e48\u0e19<\/span><\/h2>\n\n      <!-- WHITE CARD (330:3586) \u2014 pulled up so the heading straddles its top edge\n           (Figma: card top at ~49.6% of the heading box). The pull-up mirrors HALF\n           the heading's line-box \u2014 Thai font clamp(1.6rem,4cqw,3.2rem) \u00d7 1.25\n           leading = clamp(2rem,5cqw,4rem), so half = clamp(1rem,2.5cqw,2rem). Using\n           the SAME clamp shape keeps the ~50% straddle stable at every width; a bare\n           cqw drifted (heading floated onto the orange at narrow\/some widths). The\n           English pair is derived the same way \u2014 see $df_beliefs_pull above. -->\n      <div class=\"relative -mt-[clamp(1rem,2.5cqw,2rem)] rounded-[4cqw] bg-white px-[6%] pb-[6%] pt-[8%] shadow-[0_10px_30px_rgba(0,0,0,0.08)] lg:rounded-[2cqw] lg:pt-[5cqw]\">\n        <div class=\"flex flex-col gap-[6%] lg:gap-[3.4cqw]\">\n                    <div class=\"flex items-start gap-[4%]\" data-reveal data-reveal-delay=\"0ms\">\n            <img\n              src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/beliefs-leaf-1.webp\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              class=\"mt-[0.2em] block w-[11%] max-w-[113px] shrink-0\"\n              width=\"113\"\n              height=\"79\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n            <div class=\"flex-1\">\n              <!-- item-head: Figma's ember #ee7623, same as the rest of the page\n                   since 2026-08-05. On this white card it is 2.90:1 \u2014 under the\n                   3 the 27.2px desktop head needs and well under the 4.5 its\n                   16.8px mobile floor needs, since at that size it is body text.\n                   It replaced #b0520d (5.17), which 14670d6 chose for that floor\n                   after #d9640f (3.6) had already failed it. Client decision,\n                   taken with the numbers; see about-hero\/render.php. -->\n              <h3 class=\"font-accent italic leading-tight text-[#ee7623]\" style=\"font-size: clamp(1.05rem, 2cqw, 1.7rem)\">\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e14\u0e35\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e04\u0e19\u0e44\u0e14\u0e49<\/h3>\n              <p class=\"mt-[0.35em] font-body leading-relaxed text-about-navy\" style=\"font-size: clamp(0.875rem, 1.32cqw, 1.12rem)\">\u0e40\u0e23\u0e32\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e41\u0e01\u0e49\u0e27\u0e2d\u0e32\u0e08\u0e40\u0e1b\u0e47\u0e19\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e2d\u0e32\u0e0a\u0e35\u0e1e \u0e23\u0e32\u0e22\u0e44\u0e14\u0e49 \u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e04\u0e07\u0e43\u0e19\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e02\u0e2d\u0e07\u0e43\u0e04\u0e23\u0e1a\u0e32\u0e07\u0e04\u0e19 \u0e23\u0e2a\u0e0a\u0e32\u0e15\u0e34\u0e17\u0e35\u0e48\u0e14\u0e35\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48\u0e04\u0e27\u0e32\u0e21\u0e2d\u0e23\u0e48\u0e2d\u0e22\u0e41\u0e15\u0e48\u0e04\u0e37\u0e2d\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e17\u0e35\u0e48\u0e23\u0e2d\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e17\u0e38\u0e01\u0e41\u0e01\u0e49\u0e27<\/p>\n            <\/div>\n          <\/div>\n                    <div class=\"flex items-start gap-[4%]\" data-reveal data-reveal-delay=\"90ms\">\n            <img\n              src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/beliefs-leaf-2.webp\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              class=\"mt-[0.2em] block w-[11%] max-w-[113px] shrink-0\"\n              width=\"113\"\n              height=\"79\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n            <div class=\"flex-1\">\n              <!-- item-head: Figma's ember #ee7623, same as the rest of the page\n                   since 2026-08-05. On this white card it is 2.90:1 \u2014 under the\n                   3 the 27.2px desktop head needs and well under the 4.5 its\n                   16.8px mobile floor needs, since at that size it is body text.\n                   It replaced #b0520d (5.17), which 14670d6 chose for that floor\n                   after #d9640f (3.6) had already failed it. Client decision,\n                   taken with the numbers; see about-hero\/render.php. -->\n              <h3 class=\"font-accent italic leading-tight text-[#ee7623]\" style=\"font-size: clamp(1.05rem, 2cqw, 1.7rem)\">\u0e17\u0e38\u0e01\u0e04\u0e19\u0e2a\u0e21\u0e04\u0e27\u0e23\u0e17\u0e35\u0e48\u0e08\u0e30\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/h3>\n              <p class=\"mt-[0.35em] font-body leading-relaxed text-about-navy\" style=\"font-size: clamp(0.875rem, 1.32cqw, 1.12rem)\">\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e38\u0e01\u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e49\u0e32\u0e19\u0e40\u0e25\u0e47\u0e01\u0e23\u0e34\u0e21\u0e17\u0e32\u0e07\u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e32\u0e40\u0e1f\u0e48\u0e43\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e04\u0e27\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e2a\u0e39\u0e07\u0e43\u0e19\u0e23\u0e32\u0e04\u0e32\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e18\u0e23\u0e23\u0e21 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e17\u0e38\u0e01\u0e04\u0e19\u0e2a\u0e21\u0e04\u0e27\u0e23\u0e21\u0e35\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e17\u0e35\u0e48\u0e14\u0e35<\/p>\n            <\/div>\n          <\/div>\n                    <div class=\"flex items-start gap-[4%]\" data-reveal data-reveal-delay=\"180ms\">\n            <img\n              src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/beliefs-leaf-3.webp\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              class=\"mt-[0.2em] block w-[11%] max-w-[113px] shrink-0\"\n              width=\"113\"\n              height=\"79\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n            <div class=\"flex-1\">\n              <!-- item-head: Figma's ember #ee7623, same as the rest of the page\n                   since 2026-08-05. On this white card it is 2.90:1 \u2014 under the\n                   3 the 27.2px desktop head needs and well under the 4.5 its\n                   16.8px mobile floor needs, since at that size it is body text.\n                   It replaced #b0520d (5.17), which 14670d6 chose for that floor\n                   after #d9640f (3.6) had already failed it. Client decision,\n                   taken with the numbers; see about-hero\/render.php. -->\n              <h3 class=\"font-accent italic leading-tight text-[#ee7623]\" style=\"font-size: clamp(1.05rem, 2cqw, 1.7rem)\">\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e17\u0e35\u0e48\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1a\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19<\/h3>\n              <p class=\"mt-[0.35em] font-body leading-relaxed text-about-navy\" style=\"font-size: clamp(0.875rem, 1.32cqw, 1.12rem)\">\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e17\u0e32\u0e07\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e41\u0e15\u0e48\u0e04\u0e37\u0e2d\u0e23\u0e32\u0e01\u0e10\u0e32\u0e19 \u0e01\u0e32\u0e23\u0e25\u0e07\u0e17\u0e38\u0e19\u0e43\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e25\u0e07\u0e17\u0e38\u0e19\u0e43\u0e19\u0e04\u0e27\u0e32\u0e21\u0e44\u0e27\u0e49\u0e27\u0e32\u0e07\u0e43\u0e08\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e21\u0e35\u0e27\u0e31\u0e19\u0e40\u0e2a\u0e37\u0e48\u0e2d\u0e21\u0e04\u0e48\u0e32<\/p>\n            <\/div>\n          <\/div>\n                    <div class=\"flex items-start gap-[4%]\" data-reveal data-reveal-delay=\"270ms\">\n            <img\n              src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/beliefs-leaf-4.webp\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              class=\"mt-[0.2em] block w-[11%] max-w-[113px] shrink-0\"\n              width=\"113\"\n              height=\"79\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n            <div class=\"flex-1\">\n              <!-- item-head: Figma's ember #ee7623, same as the rest of the page\n                   since 2026-08-05. On this white card it is 2.90:1 \u2014 under the\n                   3 the 27.2px desktop head needs and well under the 4.5 its\n                   16.8px mobile floor needs, since at that size it is body text.\n                   It replaced #b0520d (5.17), which 14670d6 chose for that floor\n                   after #d9640f (3.6) had already failed it. Client decision,\n                   taken with the numbers; see about-hero\/render.php. -->\n              <h3 class=\"font-accent italic leading-tight text-[#ee7623]\" style=\"font-size: clamp(1.05rem, 2cqw, 1.7rem)\">\u0e04\u0e27\u0e32\u0e21\u0e40\u0e08\u0e23\u0e34\u0e0d\u0e23\u0e38\u0e48\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e41\u0e1a\u0e48\u0e07\u0e1b\u0e31\u0e19\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49<\/h3>\n              <p class=\"mt-[0.35em] font-body leading-relaxed text-about-navy\" style=\"font-size: clamp(0.875rem, 1.32cqw, 1.12rem)\">\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e23\u0e38\u0e48\u0e07\u0e40\u0e23\u0e37\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e01\u0e47\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22 \u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e40\u0e01\u0e21\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1c\u0e39\u0e49\u0e0a\u0e19\u0e30\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e04\u0e19\u0e40\u0e14\u0e35\u0e22\u0e27\u0e41\u0e15\u0e48\u0e04\u0e37\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e19\u0e34\u0e40\u0e27\u0e28\u0e17\u0e35\u0e48\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15\u0e44\u0e1b\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e31\u0e19 \u0e1e\u0e27\u0e01\u0e40\u0e23\u0e32\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e19\u0e34\u0e22\u0e32\u0e21\u0e21\u0e31\u0e19\u0e27\u0e48\u0e32 \u201c\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02 Ecosystem\u201d<\/p>\n            <\/div>\n          <\/div>\n                    <div class=\"flex items-start gap-[4%]\" data-reveal data-reveal-delay=\"360ms\">\n            <img\n              src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/beliefs-leaf-5.webp\"\n              alt=\"\"\n              aria-hidden=\"true\"\n              class=\"mt-[0.2em] block w-[11%] max-w-[113px] shrink-0\"\n              width=\"113\"\n              height=\"79\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            \/>\n            <div class=\"flex-1\">\n              <!-- item-head: Figma's ember #ee7623, same as the rest of the page\n                   since 2026-08-05. On this white card it is 2.90:1 \u2014 under the\n                   3 the 27.2px desktop head needs and well under the 4.5 its\n                   16.8px mobile floor needs, since at that size it is body text.\n                   It replaced #b0520d (5.17), which 14670d6 chose for that floor\n                   after #d9640f (3.6) had already failed it. Client decision,\n                   taken with the numbers; see about-hero\/render.php. -->\n              <h3 class=\"font-accent italic leading-tight text-[#ee7623]\" style=\"font-size: clamp(1.05rem, 2cqw, 1.7rem)\">\u0e04\u0e27\u0e32\u0e21\u0e04\u0e25\u0e32\u0e2a\u0e2a\u0e34\u0e01\u0e01\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49<\/h3>\n              <p class=\"mt-[0.35em] font-body leading-relaxed text-about-navy\" style=\"font-size: clamp(0.875rem, 1.32cqw, 1.12rem)\">\u0e23\u0e2a\u0e0a\u0e32\u0e15\u0e34\u0e17\u0e35\u0e48\u0e04\u0e19\u0e44\u0e17\u0e22\u0e44\u0e27\u0e49\u0e27\u0e32\u0e07\u0e43\u0e08\u0e15\u0e25\u0e2d\u0e14 27 \u0e1b\u0e35\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e21\u0e48\u0e17\u0e35\u0e48\u0e2a\u0e14\u0e43\u0e2a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e01\u0e31\u0e1a\u0e22\u0e38\u0e04\u0e2a\u0e21\u0e31\u0e22\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e15\u0e25\u0e2d\u0e14\u0e44\u0e14\u0e49 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e25\u0e37\u0e21\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e41\u0e25\u0e30\u0e15\u0e31\u0e27\u0e15\u0e19\u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07<\/p>\n            <\/div>\n          <\/div>\n                  <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT FACTORY \u2014 Figma 330:3618 (photo) + 330:3623 (blue panel).\n============================================================================ -->\n<!-- abot-us-3: the orange\u2192cream transition wave lives in this section. Figma runs\n     the orange field PAST the top of the card and breaks to cream around the\n     card's own middle, so the photo\/panel lockup straddles the two bands; the\n     wave used to sit at the very top of the section instead, leaving the whole\n     card on cream.\n     Rather than paint an orange band, the section simply stops covering the page:\n     it no longer fills #f8f3ed, so the body's orange + gold line-art (which the\n     transparent about-beliefs band above already shows) carries straight down\n     into it, and a cream layer takes over from the wave line to the section's\n     foot \u2014 where about-vision's own cream continues.\n     The wave's flow height + its 3cqw gap move to the section's padding-top so\n     the card keeps the exact position it had before the wave went absolute. -->\n<section class=\"relative w-full pt-[calc(clamp(24px,4.27vw,82px)+3cqw)]\" data-about-factory>\n  <!-- Section heading for the document outline\/AT only \u2014 visually this section\n       is the factory photo + the navy quote panel (whose quote stays an h3). -->\n  <h2 class=\"sr-only\">\u0e42\u0e23\u0e07\u0e07\u0e32\u0e19\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07<\/h2>\n  <!-- Cream from the wave line down. Both this and the wave are anchored to the\n       same top, and the wave paints orange over roughly its upper 70% (the SVG's\n       path bottoms out at y 65.8..79.8 of its 100-unit viewBox), so the visible\n       orange\u2192cream edge lands a little below the anchor and crosses the card near\n       its middle. -->\n  <div class=\"df-cream-field pointer-events-none absolute inset-x-0 bottom-0 top-[51.8%] z-0\"><\/div>\n  <img decoding=\"async\"\n    src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-wave-orange.svg\"\n    alt=\"\"\n    aria-hidden=\"true\"\n    loading=\"lazy\"\n    class=\"pointer-events-none absolute inset-x-0 top-[51.8%] z-0 block w-full -scale-x-100 h-[clamp(24px,4.27vw,82px)]\"\n  \/>\n  <!-- data-reveal sits HERE, not on the <section>: \"left\" translates by \u221240px, and\n       the section owns the two full-bleed layers that build the orange\u2192cream\n       transition (the df-cream-field layer and the wave <img> above, both\n       inset-x-0). Sliding the section slid the band with it and opened a 40px\n       orange gutter down the right edge. Only the photo + quote panel move. -->\n  <div class=\"@container relative z-10 mx-auto w-full\" data-reveal=\"left\">\n    <!-- inner frame: flow column on mobile, Figma-aspect overlap box on desktop -->\n    <div class=\"relative mx-auto flex w-[92%] flex-col gap-[4%] lg:block lg:aspect-[1566\/478] lg:w-[88%] lg:gap-0\">\n\n      <!-- FACTORY PHOTO (Figma 330:3618), rounded, logo baked in. Asset re-cropped\n           to 892\u00d7341 (was 1024\u00d7392): the original export caught a clipped slice of\n           the Thai quote panel at its right edge, visible below lg where the navy\n           card stacks under the photo instead of overlaying it. -->\n\n      <div class=\"relative aspect-[1055\/403] w-full overflow-hidden rounded-2xl lg:absolute lg:left-0 lg:top-[7.9%] lg:h-[84.3%] lg:w-[67.4%] lg:rounded-[18px]\">\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/factory-photo.webp?v=1786385121\"\n          alt=\"\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e1a\u0e23\u0e23\u0e08\u0e38\u0e19\u0e49\u0e33\u0e1a\u0e25\u0e39\u0e2e\u0e32\u0e27\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e07\u0e32\u0e19\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e42\u0e25\u0e42\u0e01\u0e49 Ding Fong\"\n          class=\"absolute inset-0 h-full w-full object-cover\"\n          width=\"892\"\n          height=\"341\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n      <\/div>\n\n      <!-- BLUE PANEL (Figma 330:3623 \/ 330:3624 #214492): heading + paragraph.\n           Mobile: auto height, padded. Desktop: Figma aspect + % insets.\n           The panel is aspect-locked while the body type has rem clamp caps, so\n           the longer EN paragraph overflows the panel bottom at lg widths\n           ~1024\u20131550 (fits at \u22651600 where the caps shrink type relative to the\n           panel). Same fix as the about-brand pill: EN-only smaller body type +\n           tighter leading, picked per-language at render time; Thai keeps the\n           Figma size (and the relaxed leading Thai script needs). -->\n            <div class=\"relative w-full rounded-[4cqw] bg-about-navy px-[7%] py-[7%] lg:absolute lg:left-[58.8%] lg:top-0 lg:aspect-[645\/478] lg:w-[41.2%] lg:rounded-[1.6cqw] lg:px-0 lg:py-0\">\n        <div class=\"flex flex-col lg:absolute lg:inset-[7.7%_6%_6%_7%]\">\n          <h3 class=\"font-display font-bold leading-snug text-white\" style=\"font-size: clamp(1.1rem, 2cqw, 1.9rem)\">\u201c\u0e40\u0e15\u0e34\u0e21\u0e40\u0e15\u0e47\u0e21\u0e23\u0e2a\u0e0a\u0e32\u0e15\u0e34\u0e41\u0e2b\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02 \u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e1b\u0e23\u0e30\u0e15\u0e39\u0e2a\u0e39\u0e48\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e04\u0e19\u201d<\/h3>\n          <p class=\"mt-[4%] font-body leading-relaxed text-[0.875rem] lg:text-[clamp(0.72rem,1.16cqw,1.35rem)] text-white\/95 lg:mt-[5%]\">\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e14\u0e33\u0e23\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32\u0e1c\u0e39\u0e49\u0e1c\u0e25\u0e34\u0e15\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e33\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e14\u0e37\u0e48\u0e21\u0e41\u0e25\u0e30\u0e40\u0e1a\u0e40\u0e01\u0e2d\u0e23\u0e35\u0e48 \u0e41\u0e15\u0e48\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e47\u0e19 \u201c\u0e1c\u0e39\u0e49\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u201d \u0e17\u0e38\u0e01\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e42\u0e23\u0e07\u0e07\u0e32\u0e19\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a \u0e41\u0e15\u0e48\u0e04\u0e37\u0e2d\u0e40\u0e21\u0e25\u0e47\u0e14\u0e1e\u0e31\u0e19\u0e18\u0e38\u0e4c\u0e02\u0e2d\u0e07\u0e2d\u0e32\u0e0a\u0e35\u0e1e \u0e04\u0e27\u0e32\u0e21\u0e1d\u0e31\u0e19 \u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e04\u0e07\u0e43\u0e19\u0e0a\u0e35\u0e27\u0e34\u0e15 \u0e17\u0e35\u0e48\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e1a\u0e48\u0e07\u0e1a\u0e32\u0e19\u0e43\u0e19\u0e21\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e44\u0e17\u0e22\u0e17\u0e38\u0e01\u0e04\u0e19 \u0e01\u0e27\u0e48\u0e32 27 \u0e1b\u0e35\u0e17\u0e35\u0e48\u0e1c\u0e48\u0e32\u0e19\u0e21\u0e32 \u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e02\u0e32\u0e22\u0e41\u0e04\u0e48\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e0a\u0e07 \u0e41\u0e15\u0e48\u0e40\u0e23\u0e32\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e04\u0e07\u0e43\u0e19\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e04\u0e19\u0e21\u0e32\u0e01\u0e21\u0e32\u0e22 \u0e41\u0e25\u0e30\u0e08\u0e30\u0e22\u0e31\u0e07\u0e04\u0e07\u0e40\u0e15\u0e34\u0e21\u0e40\u0e15\u0e47\u0e21\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e19\u0e35\u0e49\u0e15\u0e48\u0e2d\u0e44\u0e1b<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT VISION \u2014 Figma 416:3012. Cream band, centred copy, icon bottom-right.\n============================================================================ -->\n<!-- abot-us-3: the top orange wave moved to about-factory (which now opens the\n     cream band); this section continues the same #f8f3ed cream. -->\n<section class=\"df-cream-field relative w-full\" data-about-vision>\n  <!-- data-reveal sits HERE, not on the <section>: the section IS the cream band,\n       and a bare reveal lifts it 34px, which tore a 34px orange sliver open\n       between about-factory's cream (which ends flush at this section's top) and\n       this one. Only the content block + its icon animate. -->\n  <div class=\"@container relative mx-auto w-full\" data-reveal>\n    <div class=\"relative mx-auto w-[92%] max-w-[1063px] px-[2%] pb-[8%] pt-[7%] lg:px-0 lg:pb-[3.4cqw] lg:pt-[3cqw]\">\n\n      <!-- \u2500\u2500 CONTENT BLOCK (was the white card, 416:2943) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n           Figma wraps all of this in a white rounded card and pads it\n           asymmetrically (5.5% \/ 17%), which reproduces its own offset: it\n           centres the texts at group x\u2248477 while the box centres at 531,\n           because the icon owns the right side. Both are gone, in two steps and\n           both at the client's request.\n           1. The CARD went first. With a visible frame around it the 61px\n              offset read as a mistake \u2014 a frame invites the eye to measure\n              against it. On the bare cream band there is nothing to measure\n              against.\n           2. Then the OFFSET itself: the copy is now centred. This box was\n              already centred in the section, so symmetric padding alone lands\n              every line on the section's centre and the icon keeps its place.\n           Only the two body paragraphs sit level with the icon (it starts below\n           the green pill), so they are the only thing that had to give way \u2014\n           see their max-width. `relative` stays: the icon is positioned against\n           this box. -->\n      <div class=\"relative px-[6%] pb-[8%] pt-[6%] lg:mx-[2.1%] lg:px-[5.5%] lg:pb-[1.6cqw] lg:pt-[0.6cqw]\">\n\n        <!-- HEADING \"\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c\" \u2014 curved Sriracha (orange), flanking leaf + dot.\n             Unchanged component; only its width is re-based on the block's\n             content box (434\/789 = 55% \u2014 left as-is when the padding went\n             symmetric; the heading reads fine slightly narrower). Its viewBox\n             carries ~47% of empty headroom above the glyphs, so it needs\n             almost no padding above it \u2014\n             the block's 0.6cqw plus that slack reads as its top padding.\n             (Figma's flattened heading image is cropped tight to the glyphs, so\n             our top gap runs ~35px more airy than the comp; cropping the SVG\n             viewBox would move every leaf\/dot inset, which is not worth it.) -->\n        <div class=\"relative mx-auto aspect-[720\/132] w-[80%] max-w-[560px] lg:w-[55%]\">\n          <h2 class=\"sr-only\">\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c<\/h2>\n          <svg class=\"curved-heading absolute inset-0 h-full w-full\" viewBox=\"0 0 720 132\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\" focusable=\"false\">\n            <defs><path id=\"df-vision-curve\" fill=\"none\" d=\"M 108 96 Q 360 62 612 96\" \/><\/defs>\n            <text text-anchor=\"middle\"><textPath href=\"#df-vision-curve\" startOffset=\"50%\">\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c<\/textPath><\/text>\n          <\/svg>\n          <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[4%] top-[42%] h-[30%] w-[9%]\" \/>\n          <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[8%] top-[12%] h-[20%] w-[3.6%]\" \/>\n          <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[87%] top-[42%] h-[30%] w-[9%] -scale-x-100\" \/>\n          <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[88.4%] top-[12%] h-[20%] w-[3.6%] -scale-x-100\" \/>\n        <\/div>\n\n        <!-- \u2500\u2500 LOGO-AND-ARROWS ICON (416:2951, 208\u00d7336) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n             Desktop: bottom-right of the content block, overhanging its right\n             edge by 23px (= 2.26% of the 1018 box) and bottom-aligned with it,\n             exactly as Figma has it at xl. Nothing collides with it: the only\n             copy at its height is the body pair, whose max-width is capped to\n             clear it. Below lg it falls back into the flow above the text (the\n             block is a single narrow column there and there is no room beside\n             it).\n             17.5% between lg and xl, Figma's 20.43% only from xl. The icon is\n             bottom-anchored but sized off the block's WIDTH, so in a short\n             block it is proportionally taller: at 1024 it stands 297 of the\n             box's 546 and its top reaches y249 \u2014 exactly where the Thai line\n             ends. Full width collides from 1024 to ~1150 and clears by 1200;\n             17.5% clears the whole band, and by xl the block is tall enough\n             that the Figma size fits with room to spare. -->\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/vision-icon.webp?v=1786385121\"\n          alt=\"\u0e42\u0e25\u0e42\u0e01\u0e49\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u0e01\u0e31\u0e1a\u0e25\u0e39\u0e01\u0e28\u0e23\u0e0a\u0e35\u0e49\u0e02\u0e36\u0e49\u0e19 \u0e2a\u0e37\u0e48\u0e2d\u0e16\u0e36\u0e07\u0e27\u0e34\u0e2a\u0e31\u0e22\u0e17\u0e31\u0e28\u0e19\u0e4c\u0e01\u0e32\u0e23\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15\"\n          class=\"mx-auto mt-[6%] block aspect-[212\/342] w-[32%] max-w-[150px] lg:absolute lg:-right-[2.26%] lg:bottom-0 lg:mt-0 lg:w-[17.5%] lg:max-w-none xl:w-[20.43%]\"\n          width=\"212\"\n          height=\"342\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n\n        <!-- English tagline (416:2948) \u2014 brand text, shown verbatim in both\n             languages. Figma boxes it 703 wide = 89.1% of the content column,\n             which is what wraps it into the comp's three lines. -->\n        <p class=\"mx-auto mt-[6%] text-center font-accent italic leading-snug lg:mt-[1cqw] lg:max-w-[89.1%]\" style=\"font-size: clamp(1.15rem, 2.5cqw, 2.25rem)\"><span class=\"text-[#ee7623]\">&ldquo;DingFong Beyond Sweetness&rdquo;<\/span><br><span class=\"text-brand-green-700\">We exist to create value, quality, and happiness beyond just sweet taste.<\/span><\/p>\n\n        <!-- Thai line (416:2946) \u2014 navy. The redesign makes this the LARGEST\n             line in the card (Figma boxes it 948\u00d757, where the old comp ran it\n             SMALLER than the English tagline). Figma also gives it 948px of\n             room \u2014 wider than the 789 content column \u2014 so it stays on one line:\n             the negative inline margins widen this block to 789 \u00d7 1.2 \u2248 935\n             without moving its centre. 2.6cqw (37.4px at 1440) is the measured\n             fit, not the comp's nominal size: our Sriracha sets this string\n             973px wide at 40px, i.e. wider than the box, and a second line\n             breaks the lockup. Both terms scale with the viewport below 1440 so\n             the fit holds at every width. Nothing else sits at this\n             height, and the icon starts 38px lower, so the overhang is free.\n             The pull-out is -4%, not the -10% it needed under the old\n             asymmetric padding: symmetric padding widened the content box from\n             789 to 906, so 4% now yields 974px \u2014 one line with 45px still\n             inside the column, where -10% would have pushed it 9px past. -->\n        <p class=\"mt-[3%] text-center font-accent italic leading-snug text-about-navy lg:-mx-[4%] lg:mt-[1cqw]\" style=\"font-size: clamp(1rem, 2.6cqw, 2.34rem)\">\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u2026\u0e17\u0e35\u0e48\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32\u0e41\u0e04\u0e48\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e27\u0e32\u0e19\u0e04\u0e37\u0e2d\u0e04\u0e38\u0e13\u0e04\u0e48\u0e32\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e17\u0e35\u0e48\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19<\/p>\n\n        <!-- Green pill (416:2949\/2950). Sriracha per the Figma render \u2014 the old\n             build set it font-display bold. The fill stays #2a995c rather than\n             the comp's lighter green: white on the lighter green drops under\n             4.5:1, the same a11y deviation the other About greens carry. -->\n        <div class=\"mx-auto mt-[3.5%] flex w-fit items-center justify-center rounded-full bg-[#2a995c] px-[5%] py-[0.5em] lg:mt-[2.6cqw]\">\n          <span class=\"text-center font-accent leading-tight text-white\" style=\"font-size: clamp(1rem, 2.22cqw, 2rem)\">\u201c\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07\u2026 \u0e17\u0e35\u0e48\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32\u0e41\u0e04\u0e48\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e27\u0e32\u0e19\u201d<\/span>\n        <\/div>\n\n        <!-- Body \u2014 two paragraphs (416:2947 is one text node in Figma; kept as\n             two <p> so the blank line between them survives translation), navy.\n             These are the ONLY lines level with the icon, so once the copy was\n             centred they are what had to yield: 68% of the content box leaves\n             an 18px gap to the icon at 1440 and still wraps to the same number\n             of lines as before (66% costs an extra line, 71.5% touches the\n             icon). Figma's own 92.4% only fitted while the box was padded\n             17% on the right. -->\n        <p class=\"mx-auto mt-[3.5%] text-center font-body leading-relaxed text-about-navy lg:mt-[1.8cqw] lg:max-w-[68%]\" style=\"font-size: clamp(0.95rem, 1.67cqw, 1.5rem)\">\u0e40\u0e23\u0e32\u0e21\u0e38\u0e48\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e2a\u0e21\u0e48\u0e33\u0e40\u0e2a\u0e21\u0e2d \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e15\u0e34\u0e1a\u0e42\u0e15\u0e43\u0e2b\u0e49\u0e17\u0e38\u0e01\u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e01\u0e32\u0e23 \u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e17\u0e35\u0e48\u0e22\u0e31\u0e48\u0e07\u0e22\u0e37\u0e19\u0e41\u0e01\u0e48\u0e0a\u0e38\u0e21\u0e0a\u0e19 \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e23\u0e49\u0e32\u0e19\u0e19\u0e49\u0e33\u0e0a\u0e07 \u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23 \u0e04\u0e32\u0e40\u0e1f\u0e48 \u0e04\u0e39\u0e48\u0e04\u0e49\u0e32 \u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e1b\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07<\/p>\n        <p class=\"mx-auto mt-[3%] text-center font-body leading-relaxed text-about-navy lg:mt-[2.4cqw] lg:max-w-[68%]\" style=\"font-size: clamp(0.95rem, 1.67cqw, 1.5rem)\">\u0e40\u0e1e\u0e23\u0e32\u0e30\u0e40\u0e23\u0e32\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\u0e44\u0e21\u0e48\u0e43\u0e0a\u0e48\u0e41\u0e04\u0e48\u0e02\u0e32\u0e22\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e41\u0e15\u0e48\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19\u0e1e\u0e32\u0e23\u0e4c\u0e17\u0e40\u0e19\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e44\u0e27\u0e49\u0e27\u0e32\u0e07\u0e43\u0e08\u0e44\u0e14\u0e49 \u0e17\u0e35\u0e48\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e17\u0e38\u0e01\u0e40\u0e21\u0e19\u0e39\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u201c\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32\u0e41\u0e04\u0e48\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e27\u0e32\u0e19\u201d \u0e41\u0e25\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e15\u0e48\u0e2d\u0e22\u0e2d\u0e14\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e02\u0e2d\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e43\u0e2b\u0e49\u0e41\u0e01\u0e48\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e17\u0e38\u0e01\u0e04\u0e19<\/p>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT MISSION \u2014 Figma 330:3774. Cream band, radial splash.\n     The cream bg lives on the INNER wrapper (not the <section>) so the bottom\n     wave strip below it can show the orange page field through its dips.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-mission>\n  <div class=\"df-cream-field relative mx-auto w-full\">\n    <!-- SCALE CONTAINER (2026-08, user request: this lockup read far too large\n         next to the rest of the page). The @container moved OFF the full-width\n         cream wrapper and onto this capped column, so every cqw term in the\n         section \u2014 type, pill padding, the section's own vertical padding \u2014\n         is now measured against the LOCKUP's width instead of the viewport's\n         and the whole thing scales as one unit. Nothing below had to change.\n         1000px: the reference shot puts the pill lockup at ~66% of the page\n         (\u224817% clear on each side) and the pills anchor at 3.5%\/97.8% of this\n         column, so 1000 lands them at 15.3%..84.7% of a 1440 page. The knock-on\n         is a ~0.77 scale on the type (TH heading 64\u219249.5px, subtitle 36\u219228px),\n         which is the point.\n         The cream stays on the full-width wrapper so the band still bleeds\n         edge to edge; only its content narrows. The @container must not sit on\n         the same element as the cqw paddings below \u2014 an element cannot query\n         itself \u2014 hence the separate wrapper. -->\n    <div class=\"@container relative mx-auto w-[94%] max-w-[1000px]\">\n    <!-- data-reveal sits HERE, not on the <section>: the section wraps the cream\n         band AND the closing wave, so a bare reveal lifted the whole band 34px\n         and opened an orange gap against the footer. NOT on the @container above\n         either \u2014 that element is the section's container-query root and should\n         not also carry a transform. Only this content column animates. -->\n    <div class=\"relative mx-auto flex w-full flex-col items-center px-0 pb-[3cqw] pt-[3cqw]\" data-reveal>\n\n      <!-- HEADING \"\u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08\" \u2014 curved Sriracha (orange), leaf + dot. -->\n      <div class=\"relative aspect-[600\/132] w-[34%]\">\n        <h2 class=\"sr-only\">\u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08<\/h2>\n        <svg class=\"curved-heading absolute inset-0 h-full w-full\" viewBox=\"0 0 600 132\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\" focusable=\"false\">\n          <defs><path id=\"df-mission-curve\" fill=\"none\" d=\"M 100 96 Q 300 62 500 96\" \/><\/defs>\n          <text text-anchor=\"middle\"><textPath href=\"#df-mission-curve\" startOffset=\"50%\">\u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08<\/textPath><\/text>\n        <\/svg>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[6%] top-[42%] h-[30%] w-[10%]\" \/>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[10%] top-[12%] h-[20%] w-[4%]\" \/>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[84%] top-[42%] h-[30%] w-[10%] -scale-x-100\" \/>\n        <img src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\" alt=\"\" aria-hidden=\"true\" loading=\"lazy\" decoding=\"async\" class=\"pointer-events-none absolute left-[86%] top-[12%] h-[20%] w-[4%] -scale-x-100\" \/>\n      <\/div>\n\n      <!-- ENGLISH-ONLY LOCKUP (user request 2026-08-10, Figma 442:3075). From the\n           subtitle down to the closing line this section renders the brand's own\n           English wording in BOTH languages \u2014 the \"4 BETTERS\" naming is brand\n           copy, not UI text, so it is intentionally hard-coded rather than\n           wrapped in __(): a gettext string would let WPML String Translation\n           put Thai back under \/th\/. The curved heading above and the splash's\n           alt text stay translatable (page heading + a11y, not brand copy). -->\n\n      <!-- SUBTITLE (442:3076) \u2014 green Sriracha, 36px at frame width. -->\n      <p class=\"mt-[1cqw] text-center font-accent leading-snug text-brand-green-700\" style=\"font-size: 2.8cqw\">\u201cExceed our customer expectation in every aspect.\u201d<\/p>\n\n      <!-- \"4 BETTERS\" (442:3078) \u2014 navy Sriracha, 64px at frame width. -->\n      <p class=\"mt-[1.5%] text-center font-accent leading-tight text-about-navy\" style=\"font-size: 4.95cqw\">4 BETTERS<\/p>\n\n      <!-- RADIAL BOX: splash centred + four labels, at EVERY width (user request\n           2026-08-10). It used to break to a flow column below lg \u2014 splash on\n           top, pills stacked under it \u2014 which read as a different composition\n           from the Figma one. Now the single aspect-locked box just scales, so\n           phone and desktop show the same picture; see the $df_*_size note above\n           for what that costs at 390px. -->\n      <div class=\"relative mt-[1.5cqw] aspect-[1293\/560] w-full\">\n\n        <!-- SPLASH (353:5265) \u2014 assembled SVG, 473\u00d7446 (the node's first\n             vector IS the baked white-halo silhouette). z-[1]: above nothing\n             on the cream, below the connector lines (z-[2], Figma doc order)\n             and the pills (z-10). The wrapper is its own @container so the\n             \u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02 overlay (live text, Figma inset 33.83%\/34.11%\/86.1%,\n             Sriracha navy, \u22129.95\u00b0) scales with the artwork at every\n             width. Insets map the Figma box (717,6747 473\u00d7446) onto the\n             1293\u00d7560 radial box \u2014 same centre (50%) the pills\/lines were\n             tuned against. -->\n        <div class=\"@container absolute left-[31.7%] top-[2%] z-[1] aspect-[473\/446] w-[36.58%]\">\n          <img\n            src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/mission-splash.svg?v=1786385121\"\n            alt=\"\u0e20\u0e32\u0e1e\u0e15\u0e49\u0e19\u0e01\u0e25\u0e49\u0e32\u0e41\u0e2b\u0e48\u0e07\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e41\u0e15\u0e01\u0e43\u0e1a\u0e2a\u0e35\u0e48\u0e2a\u0e35 \u0e2a\u0e37\u0e48\u0e2d\u0e16\u0e36\u0e07\u0e2a\u0e35\u0e48\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e14\u0e35\u0e22\u0e34\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19\"\n            class=\"block h-full w-full\"\n            width=\"473\"\n            height=\"446\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          \/>\n          <!-- 6.09cqw = 80% of the Figma 7.61cqw (36px \u2192 28.8px at 1440), both\n               languages: at the Figma size the word rode too heavy on the blue\n               wave it sits on. 442:3097 sets \"HAPPINESS\" further right than the Thai word it\n               replaces \u2014 its (de-rotated) centre lands at 58.4% of the splash \u2014\n               and the box is widened to 46% so the longer word can't wrap onto\n               a second line inside it.\n               top 90.5% (was the Thai word's 86.1%, user-corrected against\n               442:3097): the wider Latin word reaches left into the wave's rising\n               stroke, so at the old inset the blue crossed its first letters.\n               Dropping it clears the stroke and leaves the Figma gap. -->\n          <p class=\"absolute left-[35.4%] top-[90.5%] w-[46%] rotate-[-9.95deg] text-center font-accent leading-none tracking-[0.01em] text-about-navy\" style=\"font-size: 6.09cqw\">HAPPINESS<\/p>\n        <\/div>\n\n                <!-- Line weight scales with the frame too (0.3cqw = the Figma 3px at the\n             1000px column), with a 1px floor so it can't fall below a device\n             pixel and disappear on a phone. -->\n        <div class=\"absolute z-[2] block h-[max(1px,0.3cqw)] left-[18%] top-[23.1%] w-[27%]\" style=\"background: #f0b529\" aria-hidden=\"true\"><\/div>\n        <div class=\"absolute z-10 flex items-center justify-center rounded-full px-[1.6cqw] py-[0.6cqw] text-center left-[3.5%] top-[18%] min-w-[29.3%]\" style=\"background: #bd8119\">\n          <!-- <p>, not <h3>: theme.json elements.heading forces Kanit onto all\n               h1\u2013h6 (unlayered, beats .font-accent), but the Figma lockup is\n               Sriracha. These are labels, not document headings (the section's\n               heading is the h2 \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 above). -->\n          <!-- whitespace-nowrap: the pill is anchored by its OUTER edge and only\n               min-width'd, so a label that wraps would grow the pill downward off\n               its connector line. The Figma strings fit on one line at every\n               width (they set the box width when they exceed the min). -->\n          <p class=\"whitespace-nowrap font-accent leading-tight text-white\" style=\"font-size: 2.4cqw\">SERVE BETTER<\/p>\n        <\/div>\n                <!-- Line weight scales with the frame too (0.3cqw = the Figma 3px at the\n             1000px column), with a 1px floor so it can't fall below a device\n             pixel and disappear on a phone. -->\n        <div class=\"absolute z-[2] block h-[max(1px,0.3cqw)] left-[59.9%] top-[24.1%] w-[33.9%]\" style=\"background: #009c4e\" aria-hidden=\"true\"><\/div>\n        <div class=\"absolute z-10 flex items-center justify-center rounded-full px-[1.6cqw] py-[0.6cqw] text-center right-[2.2%] top-[19.1%] min-w-[29.3%]\" style=\"background: #009c4e\">\n          <!-- <p>, not <h3>: theme.json elements.heading forces Kanit onto all\n               h1\u2013h6 (unlayered, beats .font-accent), but the Figma lockup is\n               Sriracha. These are labels, not document headings (the section's\n               heading is the h2 \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 above). -->\n          <!-- whitespace-nowrap: the pill is anchored by its OUTER edge and only\n               min-width'd, so a label that wraps would grow the pill downward off\n               its connector line. The Figma strings fit on one line at every\n               width (they set the box width when they exceed the min). -->\n          <p class=\"whitespace-nowrap font-accent leading-tight text-white\" style=\"font-size: 2.4cqw\">CREATE BETTER<\/p>\n        <\/div>\n                <!-- Line weight scales with the frame too (0.3cqw = the Figma 3px at the\n             1000px column), with a 1px floor so it can't fall below a device\n             pixel and disappear on a phone. -->\n        <div class=\"absolute z-[2] block h-[max(1px,0.3cqw)] left-[12%] top-[56.4%] w-[32.4%]\" style=\"background: #f58220\" aria-hidden=\"true\"><\/div>\n        <div class=\"absolute z-10 flex items-center justify-center rounded-full px-[1.6cqw] py-[0.6cqw] text-center left-[2.8%] top-[50.2%] min-w-[31.1%]\" style=\"background: #e56712\">\n          <!-- <p>, not <h3>: theme.json elements.heading forces Kanit onto all\n               h1\u2013h6 (unlayered, beats .font-accent), but the Figma lockup is\n               Sriracha. These are labels, not document headings (the section's\n               heading is the h2 \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 above). -->\n          <!-- whitespace-nowrap: the pill is anchored by its OUTER edge and only\n               min-width'd, so a label that wraps would grow the pill downward off\n               its connector line. The Figma strings fit on one line at every\n               width (they set the box width when they exceed the min). -->\n          <p class=\"whitespace-nowrap font-accent leading-tight text-white\" style=\"font-size: 2.4cqw\">INNOVATE BETTER<\/p>\n        <\/div>\n                <!-- Line weight scales with the frame too (0.3cqw = the Figma 3px at the\n             1000px column), with a 1px floor so it can't fall below a device\n             pixel and disappear on a phone. -->\n        <div class=\"absolute z-[2] block h-[max(1px,0.3cqw)] left-[60.9%] top-[44.8%] w-[26.3%]\" style=\"background: #98ca3d\" aria-hidden=\"true\"><\/div>\n        <div class=\"absolute z-10 flex items-center justify-center rounded-full px-[1.6cqw] py-[0.6cqw] text-center right-[2.2%] top-[39.6%] min-w-[29.3%]\" style=\"background: #6b9421\">\n          <!-- <p>, not <h3>: theme.json elements.heading forces Kanit onto all\n               h1\u2013h6 (unlayered, beats .font-accent), but the Figma lockup is\n               Sriracha. These are labels, not document headings (the section's\n               heading is the h2 \u0e1e\u0e31\u0e19\u0e18\u0e01\u0e34\u0e08 above). -->\n          <!-- whitespace-nowrap: the pill is anchored by its OUTER edge and only\n               min-width'd, so a label that wraps would grow the pill downward off\n               its connector line. The Figma strings fit on one line at every\n               width (they set the box width when they exceed the min). -->\n          <p class=\"whitespace-nowrap font-accent leading-tight text-white\" style=\"font-size: 2.4cqw\">GROW BETTER<\/p>\n        <\/div>\n        \n      <\/div>\n\n      <!-- CLOSING line (442:3077) \u2014 ember Sriracha 36px, white halo for legibility on cream. -->\n      <p class=\"mt-[1.5cqw] text-center font-accent leading-snug text-[#ee7623] [text-shadow:0_2px_0_#fff,0_-2px_0_#fff,2px_0_0_#fff,-2px_0_0_#fff,0_0_6px_rgba(255,255,255,0.85)]\" style=\"font-size: 2.8cqw\">\u201cDo it right. Do it better. Make it matter.\u201d<\/p>\n    <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 BOTTOM DIVIDER \u2014 wavy bottom edge of this cream band. Cream above the\n       curve, transparent below \u2192 the orange page field before the footer (and\n       its red CTA banner) shows through the dips. Lives at the END of this\n       section because what follows is the SHARED footer template-part (can't\n       carry an About-only wave). vw is safe: <main> is full width. -mt-px\n       closes the subpixel seam against the cream wrapper above. abot-us-3:\n       uses the #f8f3ed wave variant matching the new cream. -->\n  <img decoding=\"async\"\n    src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-wave-cream-2.svg\"\n    alt=\"\"\n    aria-hidden=\"true\"\n    loading=\"lazy\"\n    class=\"pointer-events-none relative z-[1] -mt-px block w-full h-[clamp(24px,4.27vw,82px)]\"\n  \/>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":65,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3960","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/comments?post=3960"}],"version-history":[{"count":2,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3960\/revisions"}],"predecessor-version":[{"id":4007,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3960\/revisions\/4007"}],"wp:attachment":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/media?parent=3960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}