{"id":3855,"date":"2026-06-26T10:42:12","date_gmt":"2026-06-26T03:42:12","guid":{"rendered":"https:\/\/dingfongfood.com\/about-2\/"},"modified":"2026-06-26T10:42:13","modified_gmt":"2026-06-26T03:42:13","slug":"about","status":"publish","type":"page","link":"https:\/\/dingfongfood.com\/th\/about\/","title":{"rendered":"\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32"},"content":{"rendered":"<!-- ============================================================================\n     ABOUT HERO \u2014 Figma node 164:1266 (\"hero\") + its sibling text nodes on the\n     About artboard (Figma file Wui8LL0rxDl4f1hmbwMiwv).\n\n     The Figma \"hero\" frame (164:1266) is 1440\u00d7697.5 @ page-y 193 (page-y 0..890\n     once the navbar headroom is included). On that frame the bottles, the white\n     wave and a couple of \"lower-hand\" pieces are stacked in this Z ORDER\n     (back \u2192 front):\n       164:1267 \"Hand 1 2\"      + 164:1268 \"Hand 2 2\"    \u2014 the two hands+bottles\n       164:1269 \"Vector\"        \u2014 the white wave  (drawn OVER the hands)\n       164:1270\/1271 \"buttom-Hand \u2026\" \u2014 small lower-hand pieces drawn over the wave\n     i.e. the hands sit BEHIND the white wave; only their lower part (the wrists)\n     is covered by it. That is the whole trick \u2014 the forearms are NOT cropped,\n     they simply pass behind the white. We reproduce it with ONE combined bottles\n     raster behind a single white wave layer (the tiny front lower-hand pieces are\n     a subtle Figma refinement we fold into the raster), which is enough to read\n     identically and is far more robust.\n\n     Pieces rebuilt here as SEPARATE responsive LAYERS:\n       assets\/about\/hero-bottles.webp  hands + OJ + strawberry bottle, TRANSPARENT\n                raster (1590\u00d71561, aspect 1.0186). COMPOSITED from the two Figma\n                hand layers 164:1267 (rotate -11.56\u00b0) + 164:1268 (rotate 12.12\u00b0)\n                at their Figma offsets, then alpha-trimmed (the small front\n                \"buttom-Hand\" pieces are folded in \u2014 the forearms simply run\n                behind the wave). Sized by WIDTH and bottom-anchored \u2014 no crop.\n       assets\/about\/hero-wave.svg  white wave (viewBox 0 0 1440 100, single white\n                path, preserveAspectRatio \"none\"). White in the UPPER half with a\n                wavy BOTTOM edge; flipped vertically (scaleY(-1)) \u2192 white at the\n                bottom, wavy orange\u2192white edge on top. Sits over a solid white\n                fill; both are full-bleed so the white continues past the capped\n                1440 frame (and into the white About-story panel) with no gap.\n       H1 \"\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32\"  Sriracha 83.33px white  @ x784.17 y195.83 (right column).\n       intro paragraph    Kanit 26.67px white     @ x784.17 y359.17 (right column).\n       LEAF \u2014 page-wide parallax leaf field (see note at the bottom of this file).\n\n     DRIFT-PROOF LOCKSTEP (the point of this rebuild): the bottle raster (height =\n     its width-% \u00d7 aspect) and the wave layer (height\/offset in cqw) are BOTH\n     driven by the FRAME WIDTH and bottom-anchored, so on any viewport the white\n     edge crosses the wrists at the SAME fraction of the bottle (~17%, verified\n     across 375\u21921920). The bottle can never drift out from behind the wave \u2014 and\n     there is NO hard overflow clip anywhere, so no \"severed wrist\" straight edge.\n\n     Frame pattern (see CLAUDE.md): the inner @container is locked to the\n     composition aspect ratio; it spans the navbar headroom (page-y 0) down\n     through the wave bottom (page-y 890), so the desktop frame box is 1440\u00d7890.\n     The page background (orange #f58132 + fruit line-art) is painted on\n     body[data-page=\"about\"], so this section only adds the bottles, the wave +\n     full-bleed white, and the live text.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-hero>\n  <!-- Frame aspect ratio: Figma composition is 1440\/890 on desktop (\u2265lg). On\n       small screens that ratio is too short \u2014 the Sriracha headline crowds under\n       the navbar and the bottles overlap the text \u2014 so the frame is made\n       progressively taller below lg. Text stacks above; the bottles are\n       bottom-anchored just above the wave. -->\n  <div\n    class=\"@container relative mx-auto aspect-[1440\/2040] w-full max-w-(--df-frame-max) sm:aspect-[1440\/1380] lg:aspect-[1440\/890]\"\n  >\n    <!-- \u2500\u2500 WHITE WAVE + FILL (Figma 164:1269 \"Vector\", assets\/about\/hero-wave.svg)\n         IN FRONT of the bottles (z-10), behind the text (z-20).\n         Figma layer order on this frame is: Hand 1\/2 \u2192 Vector(wave) \u2192 buttom-Hand\n         \u2014 i.e. the hands sit BEHIND the white wave and only their lower part is\n         covered by it. We reproduce that with a single white layer drawn over the\n         (un-clipped) bottles: the forearms simply pass behind the white. No hard\n         overflow clip anywhere, so there is never a \"severed wrist\" straight edge.\n\n         DRIFT-PROOF LOCKSTEP (the whole point of this rebuild):\n         every vertical measure here is in `cqw` (1cqw = 1% of the @container =\n         the FRAME width) and the layer is bottom-anchored \u2014 the SAME basis the\n         bottle image uses (its height = its width-% \u00d7 aspect, also frame-width\n         driven). So when the viewport changes, the wave's white edge and the\n         bottle scale together and the edge always crosses the wrists at the\n         identical point. It can never drift out from behind the wave.\n\n         FULL-BLEED: the layer is w-screen \/ -translate-x-1\/2 so the white runs\n         edge-to-edge (continuing seamlessly into the white About-story panel\n         below the frame), while its height stays locked to the capped frame via\n         cqw. The two cover heights below are matched per breakpoint to the\n         bottle's width so the crossing point stays on the wrist at every size. -->\n    <div\n      class=\"pointer-events-none absolute bottom-0 left-1\/2 z-10 w-screen max-w-none -translate-x-1\/2\"\n      aria-hidden=\"true\"\n    >\n      <!-- solid white from the wave baseline down to (and past) the frame bottom -->\n      <div\n        class=\"absolute inset-x-0 bottom-0 bg-white h-[12.5cqw] sm:h-[9.5cqw] lg:h-[9cqw]\"\n      ><\/div>\n      <!-- wave crest sitting on top of the white fill (flipped: white below,\n           wavy orange\u2192white edge on top). Height\/offset in cqw \u2192 locked. -->\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-wave.svg\"\n        alt=\"\"\n        class=\"absolute inset-x-0 w-full -scale-y-100 bottom-[12.1cqw] h-[6cqw] sm:bottom-[9.1cqw] lg:bottom-[8.6cqw] lg:h-[5cqw]\"\n      \/>\n    <\/div>\n\n    <!-- H1 \u2014 \"\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32\" (Figma 83:2068, Sriracha 83.333px white).\n         left 784.17\/1440 = 54.46%, top 195.83\/890 = 22.0%, w 368\/1440 = 25.56%.\n         font-accent = Sriracha. 83.333\/1440 = 5.787cqw.\n         On mobile the right column drops to full width & moves up. -->\n    <h1\n      class=\"absolute left-[6%] top-[calc(64px+1rem)] z-20 w-[88%] font-accent leading-none text-white [text-shadow:0_4px_8px_rgba(0,0,0,0.35)] lg:left-[54.46%] lg:top-[22%] lg:w-[40%]\"\n      style=\"font-size: clamp(2.75rem, 9cqw, 5.787cqw)\"\n    >\n      \u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32    <\/h1>\n\n    <!-- Intro paragraph (Figma 83:2067, Kanit 26.667px white).\n         left 784.17\/1440 = 54.46%, top 359.17\/890 = 40.36%, w 542.5\/1440 = 37.67%.\n         font-display = Kanit. 26.667\/1440 = 1.852cqw. -->\n    <p\n      class=\"absolute left-[6%] top-[calc(64px+4.5rem)] z-20 w-[88%] font-display leading-normal text-white [text-shadow:0_2px_5px_rgba(0,0,0,0.45)] lg:left-[54.46%] lg:top-[40.36%] lg:w-[37.67%]\"\n      style=\"font-size: clamp(1rem, 3.6cqw, 1.852cqw)\"\n    >\n      \u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c \u0e04\u0e37\u0e2d \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\u0e15\u0e49\u0e19 \u0e46 \u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e44\u0e17\u0e22 \u0e14\u0e49\u0e27\u0e22\u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e ISO, GHP\n      \u0e41\u0e25\u0e30 HALAL \u0e42\u0e14\u0e22\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 CODEX \u0e17\u0e31\u0e49\u0e07\u0e19\u0e35\u0e49 \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\n      \u0e41\u0e15\u0e48\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e44\u0e21\u0e48\u0e2a\u0e48\u0e07\u0e1c\u0e25\u0e40\u0e2a\u0e35\u0e22\u0e15\u0e48\u0e2d\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e\u0e02\u0e2d\u0e07\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\n      \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e27\u0e48\u0e32\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e22\u0e32\u0e27\u0e19\u0e32\u0e19    <\/p>\n\n    <!-- Bottles raster \u2014 hands + OJ bottle + strawberry-syrup bottle\n         (Figma 164:1267\/1268 hands + bottles, assets\/about\/hero-bottles.webp,\n         1590\u00d71561, transparent). LCP image, above the fold. z-0 \u2014 BEHIND the\n         white wave (z-10) and the text (z-20).\n\n         Sized purely by WIDTH (w-%) and BOTTOM-anchored, with NO clip: the\n         image's height is its width \u00d7 natural aspect, i.e. frame-width driven \u2014\n         the exact same basis the wave layer uses (cqw). That is what keeps the\n         wave\/wrist crossing locked on every screen. The full forearms render and\n         simply pass behind the white wave, so there is no hard cut.\n\n         Bottom is pulled a hair below the frame edge (-translate-y) so the very\n         bottom of the cuffs tucks under the white seam with no gap. Width is\n         bumped on small screens (text stacks above the bottles there); each\n         width has a matching wave cover height in the layer above. -->\n    <div\n      class=\"pointer-events-none absolute bottom-[-4.7cqw] left-1\/2 z-0 aspect-[1590\/1561] w-[80%] max-w-[520px] -translate-x-1\/2 sm:w-[60%] lg:bottom-[-5.4cqw] lg:left-[1.74%] lg:w-[55.2%] lg:max-w-none lg:translate-x-0\"\n    >\n      <img\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-bottles.webp\"\n        alt=\"\u0e21\u0e37\u0e2d\u0e2a\u0e2d\u0e07\u0e02\u0e49\u0e32\u0e07\u0e16\u0e37\u0e2d\u0e02\u0e27\u0e14\u0e19\u0e49\u0e33\u0e2a\u0e49\u0e21\u0e41\u0e25\u0e30\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=\"block h-full w-full\"\n        fetchpriority=\"high\"\n        decoding=\"async\"\n        width=\"1590\"\n        height=\"1561\"\n      \/>\n    <\/div>\n\n    <!-- Bottle-BOTTOM front pieces (Figma 164:1270 \"buttom-Hand 2 2\" + 164:1271\n         \"buttom-Hand 1 2\" \u2014 the lower glass\/base of each bottle). z-[15]: IN FRONT\n         of the white wave (z-10), behind the text (z-20). This is the layer that\n         makes the bottle bases sit ON TOP of the white wave while the hands\/wrists\n         pass behind it \u2014 exactly the Figma stack (Hand \u2192 Vector \u2192 buttom-Hand).\n\n         assets\/about\/hero-bottles-front.webp is composited on the SAME canvas\n         registration as hero-bottles.webp (same 1590\u00d71561, same crop), so giving\n         it the IDENTICAL positioning box as the bottles below pins every bottle-\n         base pixel exactly over its twin in the z-0 raster \u2014 at every breakpoint,\n         with zero drift and no JS. Keep these two boxes' classes in lockstep. -->\n    <div\n      class=\"pointer-events-none absolute bottom-[-4.7cqw] left-1\/2 z-[15] aspect-[1590\/1561] w-[80%] max-w-[520px] -translate-x-1\/2 sm:w-[60%] lg:bottom-[-5.4cqw] lg:left-[1.74%] lg:w-[55.2%] lg:max-w-none lg:translate-x-0\"\n      aria-hidden=\"true\"\n    >\n      <img loading=\"lazy\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-bottles-front.webp\"\n        alt=\"\"\n        class=\"block h-full w-full\"\n        decoding=\"async\"\n        width=\"1590\"\n        height=\"1561\"\n      \/>\n    <\/div>\n\n    <!-- Decorative leaves are no longer placed per-section: a single reusable,\n         page-wide parallax LEAF FIELD (assets\/js\/leaf-field.js, opted in via\n         body[data-leaf-field]) scatters and animates them over the whole page. -->\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT STORY \u2014 \"\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e32\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\" (Figma node 83:2073 \"section-about\").\n     Frame 1440\u00d7811.667 @ page-y 890 (directly below the hero, so this white\n     panel butts against \u2014 and continues \u2014 the hero's white bottom wave).\n\n     Composition:\n       83:2074  \"Rectangle 5\"  full-frame WHITE background with a gentle downward\n                bulge along its BOTTOM edge (center dips to y811.67, edges to\n                y777.4) \u2192 assets\/about\/story-bg.svg, stretched (preserveAspect\n                \"none\") to fill the section. The orange page shows through below\n                the bulge at the bottom corners.\n       83:2075  \"title\"  x381.67 y0 675.98\u00d7142.5 \u2014 the word \"\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e32\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\".\n                In Figma it is a flattened Sriracha vector; per project convention\n                (see partials\/products-new.html) it is rebuilt as LIVE Sriracha\n                text on a curved <textPath> (orange fill + white outline via the\n                shared .curved-heading rule). Flanked by two leaf+dot decorations:\n                  83:2130\/2132 green leaf  (#00994C)  \u2192 assets\/about\/title-leaf.svg\n                  83:2131\/2133 orange dot  (#EE7623)  \u2192 assets\/about\/title-dot.svg\n                The right pair is the left pair mirrored (-scale-x-100).\n       83:2134  body paragraph  x224.17 y180.83 1042.5\u00d7540 \u2014 Kanit 20px, centered,\n                brand-blue (#3c5dab). Four paragraphs separated by blank lines.\n\n     Unlike the hero, this section is a simple CENTERED COLUMN (title over a\n     paragraph), so it is built in normal flow rather than absolute Figma insets:\n     the @container lets every size scale in cqw (1.389cqw = 20px at the 1440 cap)\n     while the column reflows freely on narrow screens \u2014 no fixed-aspect box to\n     clip the long paragraph. A readability floor (max(.., rem)) keeps text legible\n     on mobile where pure cqw would shrink it to nothing.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-story>\n  <div class=\"@container relative mx-auto w-full\">\n    <!-- white panel bg (Figma 83:2074), wavy bottom edge; fills the column -->\n    <img decoding=\"async\"\n      src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/story-bg.svg\"\n      alt=\"\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 z-0 h-full w-full\"\n    \/>\n\n    <!-- centered content column -->\n    <!-- data-reveal sits HERE, not on the <section>: the white panel bg above\n         must stay static (it continues the hero's white wave), so only the\n         content column animates in. -->\n    <div data-reveal class=\"relative z-10 flex flex-col items-center px-[4%] pt-[1cqw] pb-[13.15cqw] lg:px-0\">\n      <!-- TITLE \u2014 \"\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e32\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\" on a curved path, leaf+dot decorations on\n           each side. The block keeps the Figma title aspect (675.98\/142.5) so\n           the leaves hold their Figma % insets; it widens below lg for legibility. -->\n      <div class=\"relative aspect-[676\/142.5] w-[82%] max-w-[675.98px] lg:w-[46.94%]\">\n        <!-- real heading for SEO \/ screen readers (visually hidden) -->\n        <h2 class=\"sr-only\">\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e32\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h2>\n        <!-- decorative curved rendering (Sriracha along an SVG path) -->\n        <svg\n          class=\"curved-heading absolute inset-0 h-full w-full\"\n          viewBox=\"0 0 676 142.5\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <path id=\"story-curve\" fill=\"none\" d=\"M 104 100 Q 338 74 572 100\" \/>\n          <\/defs>\n          <text text-anchor=\"middle\">\n            <textPath href=\"#story-curve\" startOffset=\"50%\">\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e23\u0e32\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/textPath>\n          <\/text>\n        <\/svg>\n\n        <!-- left decorations (Figma 83:2130 leaf, 83:2131 dot) -->\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-0 top-[57.85%] h-[25.03%] w-[11.7%]\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[4.5%] top-[37.66%] h-[18.05%] w-[5.04%]\"\n        \/>\n        <!-- right decorations (Figma 83:2132 leaf, 83:2133 dot) \u2014 mirrored -->\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[88.3%] top-[57.85%] h-[25.03%] w-[11.7%] -scale-x-100\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[90.47%] top-[37.66%] h-[18.05%] w-[5.03%] -scale-x-100\"\n        \/>\n      <\/div>\n\n      <!-- BODY paragraph (Figma 83:2134), Kanit, centered, brand-blue.\n           20px @ 1440 = 1.389cqw; floored at 0.95rem so it stays readable on\n           mobile. Width 1042.5\/1440 = 72.4% on desktop, wider below lg. -->\n      <!-- df-story-body: paragraph spacing is a plain CSS rule (src\/pages\/about.css),\n           NOT a Tailwind child-combinator arbitrary variant. Such a variant embeds a\n           literal greater-than sign in the class attribute, which WordPress's content\n           filters re-serialize incorrectly (dropping a quote, so the whole section's\n           markup mis-nests). Keep child\/sibling-combinator styles out of WP block markup. -->\n      <div\n        class=\"df-story-body mt-[1.5cqw] w-[92%] max-w-[1042.5px] text-center font-display leading-normal text-brand-blue lg:w-[72.4%]\"\n        style=\"font-size: max(0.95rem, 1.389cqw)\"\n      >\n                        <p>\u0e19\u0e36\u0e01\u0e16\u0e36\u0e07\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e02\u0e2d\u0e07\u0e1c\u0e25\u0e34\u0e15\u0e20\u0e31\u0e13\u0e11\u0e4c\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49 \u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e2d\u0e32\u0e14 \u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22 \u0e21\u0e35\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07 \u0e02\u0e2d\u0e43\u0e2b\u0e49\u0e19\u0e36\u0e01\u0e16\u0e36\u0e07 \u201c\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u201d<\/p>\n        <p>\u0e17\u0e32\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e02\u0e2d\u0e43\u0e2b\u0e49\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e01\u0e31\u0e1a\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e27\u0e48\u0e32 \u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e22\u0e36\u0e14\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e02\u0e2d\u0e07\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2a\u0e39\u0e07\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14 \u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e23\u0e23\u0e27\u0e31\u0e15\u0e16\u0e38\u0e14\u0e34\u0e1a\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e2a\u0e39\u0e07 \u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e1c\u0e25\u0e44\u0e21\u0e49\u0e41\u0e17\u0e49\u0e46 \u0e17\u0e35\u0e48\u0e17\u0e32\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e04\u0e2d\u0e22\u0e04\u0e31\u0e14\u0e2a\u0e23\u0e23\u0e41\u0e25\u0e30\u0e1c\u0e48\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e04\u0e31\u0e14\u0e01\u0e23\u0e2d\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e2d\u0e1a\u0e04\u0e2d\u0e1a \u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1c\u0e2a\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46\u0e17\u0e35\u0e48\u0e17\u0e32\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e21\u0e35\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a \u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21 \u0e41\u0e25\u0e30\u0e17\u0e1a\u0e17\u0e27\u0e19\u0e02\u0e49\u0e2d\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e15\u0e32\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07 CODEX \u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e32\u0e23\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e22\u0e32\u0e2d\u0e22\u0e39\u0e48\u0e40\u0e2a\u0e21\u0e2d<\/p>\n        <p>\u0e17\u0e31\u0e49\u0e07\u0e19\u0e35\u0e49 \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\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e44\u0e21\u0e48\u0e2a\u0e48\u0e07\u0e1c\u0e25\u0e40\u0e2a\u0e35\u0e22\u0e15\u0e48\u0e2d\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e\u0e02\u0e2d\u0e07\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e27\u0e48\u0e32\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e21\u0e35\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e38\u0e02\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e22\u0e32\u0e27\u0e19\u0e32\u0e19 \u0e43\u0e19\u0e41\u0e07\u0e48\u0e02\u0e2d\u0e07\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15 \u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07 Food Safety \u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e32\u0e01\u0e25 \u0e08\u0e32\u0e01 BSI \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 HACCP, GHP, \u0e41\u0e25\u0e30\u0e23\u0e30\u0e1a\u0e1a\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15 ISO 9001:2015 \u0e19\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e21\u0e35\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07\u0e08\u0e32\u0e01 \u0e2e\u0e32\u0e25\u0e32\u0e25 \u0e41\u0e25\u0e30 GMP \u0e44\u0e17\u0e22 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e44\u0e1b\u0e2d\u0e35\u0e01\u0e02\u0e31\u0e49\u0e19<\/p>\n        <p>\u0e17\u0e32\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e21\u0e35\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32 \u0e41\u0e25\u0e30\u0e17\u0e33 Internal Audit \u0e2d\u0e22\u0e39\u0e48\u0e2a\u0e21\u0e48\u0e33\u0e40\u0e2a\u0e21\u0e2d \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07 \u0e41\u0e01\u0e49\u0e44\u0e02 \u0e41\u0e25\u0e30 \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e1d\u0e48\u0e32\u0e22 R&amp;D \u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c \u0e17\u0e35\u0e48\u0e04\u0e2d\u0e22\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e02\u0e22\u0e31\u0e19\u0e02\u0e31\u0e19\u0e41\u0e02\u0e47\u0e07\u0e17\u0e38\u0e01\u0e27\u0e31\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e31\u0e49\u0e07\u0e40\u0e01\u0e48\u0e32\u0e41\u0e25\u0e30\u0e43\u0e2b\u0e21\u0e48 \u0e14\u0e49\u0e27\u0e22\u0e2b\u0e27\u0e31\u0e07\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e44\u0e14\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e44\u0e14\u0e49\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e41\u0e25\u0e30\u0e44\u0e21\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e31\u0e19\u0e15\u0e23\u0e32\u0e22\u0e15\u0e48\u0e2d\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e<\/p>\n              <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT FACTORY \u2014 \"section-about-2\" (Figma node 134:3263).\n     Frame 1215\u00d7492, centred in the 1440 page (\u2248112.5px margin each side \u2192\n     1215\/1440 = 84.375% wide). Sits just below the story panel; in Figma its top\n     overlaps the story's white wavy bottom by ~100px, so on desktop the section\n     is pulled up with a negative top margin and the photo bridges white\u2192orange.\n\n     Composition (inner 1215\u00d7492 frame):\n       83:2136  \"Rectangle\"  factory production-line PHOTO with the DingFong logo\n                composited in (baked into the export) \u2192 assets\/about\/factory-photo.webp\n                (1377\u00d7524, aspect 2.627). Figma box x0 y0 1035.47\u00d7394.17, rounded-16.\n                left 0, top 0, w 1035.47\/1215 = 85.224%, h 394.17\/492 = 80.116%.\n       83:2137  \"Isolation_Mode\"  GREEN rounded panel overlapping the photo's\n                right side and extending past it to the frame's right edge.\n                  83:2138  green vector (#009A4D), TL\/TR\/BR rounded r78.8, BL sharp\n                           \u2192 assets\/about\/factory-panel.svg (stretched, aspect 542.5\/356).\n                  83:2139  white Kanit 20px thank-you paragraph, inset\n                           [19.5% 12.06% 14.49% 9.6%] of the panel.\n                Figma box x672.92 y90.57 542.5\u00d7356.02 \u2192\n                  left 672.92\/1215 = 55.385%, top 90.57\/492 = 18.408%,\n                  w 542.5\/1215 = 44.65%, h 356.02\/492 = 72.36%.\n\n     Frame pattern (see CLAUDE.md): full-width @container (1440 ref) so 20px = 1.389cqw.\n     On desktop (\u2265lg) the photo and green panel are absolutely positioned at their\n     Figma % insets and overlap. Below lg the side-by-side overlap is too cramped,\n     so the inner box becomes a normal-flow column \u2014 photo on top, green panel\n     (auto height, padded text) below \u2014 and the paragraph is floored at 0.95rem so\n     it stays readable. The page background (orange) shows around the section.\n============================================================================ -->\n<section class=\"relative w-full lg:-mt-[6.9%]\" data-about-factory data-reveal=\"left\">\n  <div class=\"@container relative mx-auto w-full\">\n    <!-- inner frame: flow column on mobile, Figma-aspect overlap box on desktop -->\n    <div\n      class=\"relative mx-auto flex w-[88%] flex-col gap-[5%] lg:block lg:aspect-[1215\/492] lg:w-[84.375%] lg:gap-0\"\n    >\n      <!-- FACTORY PHOTO (Figma 83:2136), rounded-16, logo baked in -->\n      <div\n        class=\"relative aspect-[1035.47\/394.17] w-full overflow-hidden rounded-2xl lg:absolute lg:left-0 lg:top-0 lg:h-[80.116%] lg:w-[85.224%] lg:rounded-[16px]\"\n      >\n        <img\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/factory-photo.webp\"\n          alt=\"\u0e2a\u0e32\u0e22\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e1a\u0e23\u0e23\u0e08\u0e38\u0e19\u0e49\u0e33\u0e1c\u0e25\u0e44\u0e21\u0e49\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=\"1377\"\n          height=\"524\"\n          loading=\"lazy\"\n          decoding=\"async\"\n        \/>\n      <\/div>\n\n      <!-- GREEN PANEL (Figma 83:2137): svg behind, white Kanit paragraph on top.\n           Mobile: auto height from the padded paragraph, svg stretched behind.\n           Desktop: Figma aspect + % insets, paragraph absolutely positioned. -->\n      <div\n        class=\"relative w-full lg:absolute lg:left-[55.385%] lg:top-[18.408%] lg:aspect-[542.5\/356.02] lg:w-[44.65%]\"\n      >\n        <!-- green rounded vector (Figma 83:2138), stretched to fill the panel.\n             A11Y: the asset fill is the design-system green-700 (#007A3D), NOT the\n             Figma brand-green (#009A4D). The white 20px thank-you text below scores\n             only 3.67:1 on #009A4D (fails WCAG AA's 4.5 for body text); on green-700\n             it clears 4.5 \u2014 the same text-safe green the products pager uses. Keep\n             #007A3D on a future Figma re-export of factory-panel.svg. -->\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/factory-panel.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute inset-0 z-0 h-full w-full\"\n        \/>\n        <!-- thank-you paragraph (Figma 83:2139), Kanit 20px white -->\n        <p\n          class=\"relative z-10 px-[9.6%] py-[8%] font-display leading-normal text-white lg:absolute lg:inset-[19.5%_12.06%_14.49%_9.6%] lg:p-0\"\n          style=\"font-size: max(0.95rem, 1.389cqw)\"\n        >\n          \u0e17\u0e32\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e02\u0e2d\u0e01\u0e23\u0e32\u0e1a\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e04\u0e38\u0e13\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e17\u0e38\u0e01\u0e17\u0e48\u0e32\u0e19\u0e17\u0e35\u0e48\u0e04\u0e2d\u0e22\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\n          \u0e21\u0e32\u0e15\u0e25\u0e2d\u0e14\u0e01\u0e27\u0e48\u0e32 20 \u0e01\u0e27\u0e48\u0e32\u0e1b\u0e35 \u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u0e02\u0e2d\u0e43\u0e2b\u0e49\u0e04\u0e33\u0e21\u0e31\u0e48\u0e19\u0e2a\u0e31\u0e0d\u0e0d\u0e32\u0e27\u0e48\u0e32\n          \u0e17\u0e32\u0e07\u0e40\u0e23\u0e32\u0e08\u0e30\u0e44\u0e21\u0e48\u0e2b\u0e22\u0e38\u0e14\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e17\u0e38\u0e01\u0e04\u0e19\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e21\u0e35\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e \u0e2d\u0e23\u0e48\u0e2d\u0e22\u0e41\u0e25\u0e30\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e21\u0e32\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14        <\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT CULTURE \u2014 \"\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\" (Figma node 83:2140).\n     Frame 1440\u00d71134.167 @ page-y 2097.5 (directly below the factory section).\n\n     Composition (a centred column, built in normal flow like about-story):\n       83:2141  \"Vector\"  full-frame CREAM panel (#F8F3ED) with a gentle wavy TOP\n                and BOTTOM edge \u2192 assets\/about\/culture-bg.svg, stretched\n                (preserveAspectRatio \"none\"). The orange page shows through at the\n                corners where the wavy edges curve inward.\n       83:2142  \"title\"  the word \"\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\" (Figma: flattened Sriracha\n                vectors @ x361.67 y77.5 716.82\u00d7120). Per project convention (see\n                about-story \/ products-new) it is rebuilt as LIVE Sriracha text on\n                a curved <textPath> (orange fill + white outline via the shared\n                .curved-heading rule). Its flanking leaf+dot decorations\n                (83:2194-2197) are DEFERRED for now (see LEAF-DEFERRED below).\n       83:2198  intro paragraph  Kanit 26.667px, centred, brand-blue (#3c5dab),\n                x112.5 y249.17 1215\u00d780 (two lines on desktop).\n       135:3273 \"image 8\"  the \"WE ARE DING FONG FOOD\" values wheel (8 values\n                around a D\/F\/O\/N\/G\/G\/N\/I letter ring with the logo at center),\n                transparent raster \u2192 assets\/about\/culture-wheel.webp (1855\u00d71252,\n                aspect 1.4816). Figma box x256 y397.5 927.5\u00d7626, centred.\n\n     Like about-story this is a CENTERED COLUMN, so it is built in normal flow:\n     the @container lets every size scale in cqw (1.852cqw = 26.667px at 1440)\n     while the column reflows on narrow screens. A readability floor keeps text\n     legible on mobile.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-culture>\n  <div class=\"@container relative mx-auto w-full\">\n    <!-- cream panel bg (Figma 83:2141), wavy top+bottom edges; fills the column -->\n    <img decoding=\"async\"\n      src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/culture-bg.svg\"\n      alt=\"\"\n      aria-hidden=\"true\"\n      class=\"pointer-events-none absolute inset-0 z-0 h-full w-full\"\n    \/>\n\n    <!-- centered content column -->\n    <!-- data-reveal sits HERE, not on the <section>: the cream panel bg above\n         must stay static (it is the section's backdrop, orange shows at its\n         wavy corners), so only the content column animates in. -->\n    <div data-reveal=\"scale\" class=\"relative z-10 flex flex-col items-center px-[4%] pt-[5.38cqw] pb-[7.69cqw] lg:px-0\">\n      <!-- TITLE \u2014 \"\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\" on a curved path (leaf+dot DEFERRED).\n           Figma title frame 716.817\u00d7120 (incl. side leaves) \u2192 text-only \u2248 572.5\n           wide; rendered here at the Figma frame width 716.82\/1440 = 49.78% on\n           desktop, widened below lg for legibility. -->\n      <div class=\"relative aspect-[716.817\/142.5] w-[86%] max-w-[716.817px] lg:w-[49.78%]\">\n        <!-- real heading for SEO \/ screen readers (visually hidden) -->\n        <h2 class=\"sr-only\">\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23<\/h2>\n        <!-- decorative curved rendering (Sriracha along an SVG path) -->\n        <svg\n          class=\"curved-heading absolute inset-0 h-full w-full\"\n          viewBox=\"0 0 716.817 142.5\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <path id=\"culture-curve\" fill=\"none\" d=\"M 100 100 Q 358.4 74 616.8 100\" \/>\n          <\/defs>\n          <text text-anchor=\"middle\">\n            <textPath href=\"#culture-curve\" startOffset=\"50%\">\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23<\/textPath>\n          <\/text>\n        <\/svg>\n        <!-- flanking decorations (Figma 83:2194 leaf, 83:2195 dot \u2014 both sides),\n             same shapes as the story title, reused. Coords from the 716.817\u00d7120\n             title frame, mapped onto this 716.817\u00d7142.5 box (leaf 79.122\u00d735.672 \u2192\n             w 11.04% h 25.03%; dot 34.0085\u00d725.72 \u2192 w 4.74% h 18.05%; vertical %s\n             shared with about-story since both use the same curve). -->\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-0 top-[57.85%] h-[25.03%] w-[11.04%]\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[4.25%] top-[37.66%] h-[18.05%] w-[4.74%]\"\n        \/>\n        <!-- right pair (Figma 83:2196 leaf, 83:2197 dot) \u2014 mirrored -->\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[88.96%] top-[57.85%] h-[25.03%] w-[11.04%] -scale-x-100\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[91.01%] top-[37.66%] h-[18.05%] w-[4.74%] -scale-x-100\"\n        \/>\n      <\/div>\n\n      <!-- INTRO paragraph (Figma 83:2198), Kanit, centred, brand-blue.\n           26.667px @ 1440 = 1.852cqw; floored at 1rem for mobile.\n           Width 1215\/1440 = 84.375% on desktop, wider below lg. -->\n      <p\n        class=\"mt-[2cqw] w-[94%] max-w-[1215px] text-center font-display leading-normal text-brand-blue lg:w-[84.375%]\"\n        style=\"font-size: max(1rem, 1.852cqw)\"\n      >\n        \u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07\u0e21\u0e32\u0e22\u0e32\u0e27\u0e19\u0e32\u0e19\u0e01\u0e27\u0e48\u0e32 20 \u0e1b\u0e35 \u0e17\u0e35\u0e48 \u201c\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c\u201d \u0e40\u0e23\u0e32\u0e21\u0e35\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e17\u0e35\u0e48\u0e2b\u0e25\u0e48\u0e2d\u0e2b\u0e25\u0e2d\u0e21\u0e17\u0e38\u0e01\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e40\u0e02\u0e49\u0e32\u0e44\u0e27\u0e49\u0e14\u0e49\u0e27\u0e22\u0e01\u0e31\u0e19\n        \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e07\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e \u0e41\u0e25\u0e30\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e44\u0e14\u0e49\u0e1a\u0e23\u0e34\u0e44\u0e20\u0e04\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e17\u0e35\u0e48\u0e14\u0e35\u0e15\u0e48\u0e2d\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e      <\/p>\n\n      <!-- VALUES WHEEL (Figma 135:3273 \"image 8\"), transparent raster.\n           927.5\/1440 = 64.41% on desktop; widened below lg. aspect 927.5\/626. -->\n      <img\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/culture-wheel.webp\"\n        alt=\"\u0e41\u0e1c\u0e19\u0e20\u0e32\u0e1e\u0e04\u0e48\u0e32\u0e19\u0e34\u0e22\u0e21\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23 WE ARE DING FONG FOOD: Determined, Integrity, Never Stop Learning, Grow Professional, Family, Open Mind, Nice, Generosity\"\n        class=\"mt-[4.76cqw] aspect-[927.5\/626] w-[92%] max-w-[927.5px] object-contain lg:w-[64.41%]\"\n        width=\"1855\"\n        height=\"1252\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      \/>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     ABOUT CERTIFICATES \u2014 \"our_standards\" (Figma node 136:3401).\n     Frame 798.385\u00d7670.5 @ x312.11 y3280 (below the culture section). A centred\n     column: a curved title over the framed-certificates image.\n\n     Composition:\n       136:3347  \"Frame\"  title \"\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\" (Figma: flattened Sriracha vectors\n                 @ x0 y0 783\u00d7127.3). Per project convention (about-story \/\n                 about-culture \/ products-new) it is rebuilt as LIVE Sriracha text\n                 on a curved <textPath> (orange fill + white outline via the shared\n                 .curved-heading rule). Its flanking leaf+dot decorations\n                 (136:3396-3399) are DEFERRED for now (see LEAF-DEFERRED), matching\n                 the about-culture title.\n       135:3345  \"image 9\"  the three framed certificates with mirror reflections\n                 (BSI CODEX HACCP & GHPs; BSI ISO 9001:2015; Thai HALAL) \u2014 the SAME\n                 raster as before, resized here to x-1.61 y163.63 820\u00d7532.86\n                 (aspect 1.539). \u2192 assets\/about\/certificates.webp (1762\u00d71145).\n                 820\/1440 = 56.94% wide on desktop; the image is centred on the\n                 page and its reflections fade into the orange background.\n\n     Built in normal flow (centred column) like about-story \/ about-culture so it\n     reflows on narrow screens; cqw sizing with a readability floor.\n============================================================================ -->\n<section class=\"relative w-full\" data-about-certificates data-reveal>\n  <div class=\"@container relative mx-auto w-full\">\n    <!-- centered content column -->\n    <div class=\"relative flex flex-col items-center px-[4%] pt-[3.36cqw] pb-[2cqw] lg:px-0\">\n      <!-- TITLE \u2014 \"\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32\" on a curved path (leaf+dot DEFERRED).\n           Figma title frame 783\u00d7127.3 (incl. side leaves) \u2192 783\/1440 = 54.375%\n           on desktop, widened below lg for legibility. -->\n      <div class=\"relative aspect-[783\/156] w-[88%] max-w-[783px] lg:w-[54.375%]\">\n        <!-- real heading for SEO \/ screen readers (visually hidden) -->\n        <h2 class=\"sr-only\">\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/h2>\n        <!-- decorative curved rendering (Sriracha along an SVG path). The viewBox\n             is a little taller (156) than the other titles' (142.5): this word's\n             \u0e10 + tone marks are tall, so the baseline is lowered to keep the\n             ascenders from clipping the top edge. -->\n        <svg\n          class=\"curved-heading curved-heading--blue absolute inset-0 h-full w-full\"\n          viewBox=\"0 0 783 156\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <path id=\"standards-curve\" fill=\"none\" d=\"M 100 112 Q 391.5 86 683 112\" \/>\n          <\/defs>\n          <text text-anchor=\"middle\">\n            <textPath href=\"#standards-curve\" startOffset=\"50%\">\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/textPath>\n          <\/text>\n        <\/svg>\n\n        <!-- flanking decorations (Figma 136:3396 leaf, 136:3397 dot \u2014 both sides).\n             Same shapes as the story title (matching aspect ratios), reused.\n             leaf 85.725\/783 = 10.95% wide; dot 36.847\/783 = 4.71% wide. -->\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-0 top-[48%] h-[24.74%] w-[10.95%]\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[4.21%] top-[24%] h-[17.85%] w-[4.71%]\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[89.05%] top-[48%] h-[24.74%] w-[10.95%] -scale-x-100\"\n        \/>\n        <img decoding=\"async\"\n          src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute left-[91.08%] top-[24%] h-[17.85%] w-[4.71%] -scale-x-100\"\n        \/>\n      <\/div>\n\n      <!-- CERTIFICATES image (Figma 135:3345), transparent raster with reflections. -->\n      <img\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/certificates.webp\"\n        alt=\"\u0e43\u0e1a\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c: BSI Certificate of Registration (CODEX HACCP &amp; GHPs), BSI ISO 9001:2015 Quality Management System \u0e41\u0e25\u0e30\u0e43\u0e1a\u0e23\u0e31\u0e1a\u0e23\u0e2d\u0e07\u0e2e\u0e32\u0e25\u0e32\u0e25\"\n        class=\"mt-[2.5cqw] aspect-[881\/572.5] w-full max-w-[820px] object-contain lg:w-[56.94%]\"\n        width=\"1762\"\n        height=\"1145\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      \/>\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3855","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3855","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/comments?post=3855"}],"version-history":[{"count":1,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3855\/revisions"}],"predecessor-version":[{"id":3857,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3855\/revisions\/3857"}],"wp:attachment":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/media?parent=3855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}