:root { --about-green:#213d2b; --about-ink:#24352d; --about-paper:#faf7ef; --about-gold:#f4c85e; --about-red:#c93627; --about-muted:#66746c; }
body { margin:0; color:var(--about-ink); background:var(--about-paper); font-family:Arial,sans-serif; }
.about-hero { position:relative; min-height:470px; overflow:hidden; display:grid; place-items:center; background:#203d2b; }
.about-hero-image, .about-hero-image::after { position:absolute; inset:0; }
.about-hero-image img { display:block; width:100%; height:100%; object-fit:cover; }
.about-hero-image::after { content:""; background:linear-gradient(90deg,rgba(21,48,33,.92),rgba(21,48,33,.57) 50%,rgba(21,48,33,.24)); }
.about-hero-copy { position:relative; z-index:1; width:min(1180px,100%); padding:84px max(6%,24px); color:#fff; }
.about-hero-copy small, .about-copy small, .journey-copy>small, .value span { display:block; color:var(--about-gold); font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.about-hero-copy h1 { max-width:720px; margin:15px 0 0; color:#fff; font:700 clamp(44px,6vw,72px)/1 Georgia,serif; letter-spacing:-2px; }
.about-main { max-width:1180px; margin:auto; padding:96px max(6%,24px); }
.about-block { display:grid; grid-template-columns:1fr 1fr; gap:84px; align-items:center; margin-bottom:116px; }
.about-block.reverse .about-copy { order:-1; }
.about-photo { position:relative; min-height:390px; display:grid; place-items:center; padding:34px; background:linear-gradient(145deg,#f8df9f,#f6f1e6); }
.about-photo::before { content:""; position:absolute; inset:18px; border:1px solid rgba(85,62,25,.23); }
.about-photo::after { content:""; position:absolute; width:84px; height:84px; right:-14px; bottom:-14px; background:var(--about-red); z-index:-1; }
.about-photo img { position:relative; z-index:1; max-width:100%; max-height:340px; object-fit:contain; filter:drop-shadow(0 22px 18px rgba(38,45,28,.2)); }
.section-index { margin-bottom:12px; color:#e8dac0; font:700 74px/.65 Georgia,serif; }
.about-copy h2, .journey-copy h2, .value h2 { margin:12px 0 18px; color:var(--about-ink); font:700 clamp(31px,4vw,46px)/1.08 Georgia,serif; letter-spacing:-1px; }
.rich-content, .value p { color:var(--about-muted); font-size:15px; line-height:1.85; }
.rich-content p { margin:0 0 14px; }
.rich-content p:last-child, .value p { margin-bottom:0; }
.journey { display:grid; grid-template-columns:1.1fr .9fr; gap:58px; align-items:center; margin:0 0 100px; padding:58px; color:#fff; background:var(--about-green); }
.journey-copy h2 { color:#fff; }
.journey-copy>p { color:#dbe8de; line-height:1.8; }
.timeline-list { display:grid; gap:19px; margin-top:28px; }
.timeline-item { position:relative; padding-left:22px; border-left:1px solid rgba(244,200,94,.65); }
.timeline-item::before { content:""; position:absolute; top:4px; left:-5px; width:9px; height:9px; border-radius:50%; background:var(--about-gold); }
.timeline-item strong { display:block; color:#fff; font-size:16px; }
.timeline-item em { display:block; margin:3px 0 5px; color:var(--about-gold); font-size:11px; font-style:normal; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.timeline-item p { margin:0; color:#dbe8de; font-size:13px; line-height:1.65; }
.office-image { overflow:hidden; min-height:300px; border:1px solid rgba(255,255,255,.22); }
.office-image img { display:block; width:100%; height:330px; object-fit:cover; }
.values { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.value { padding:40px; background:#fff; border-top:5px solid var(--about-red); box-shadow:0 14px 34px rgba(36,53,45,.08); }
.value:nth-child(2) { border-color:var(--about-gold); }
.value span { color:var(--about-red); }
.value:nth-child(2) span { color:#b67c11; }
.value h2 { font-size:32px; }
@media (max-width:800px) { .about-hero { min-height:360px; }.about-hero-copy { padding:70px 8%; text-align:center; }.about-hero-image::after { background:rgba(21,48,33,.68); }.about-block, .journey { grid-template-columns:1fr; gap:38px; }.about-block { margin-bottom:78px; }.about-block.reverse .about-copy { order:0; }.about-photo { min-height:300px; }.journey { padding:38px 28px; }.values { grid-template-columns:1fr; }.about-main { padding-top:68px; } }
@media (max-width:480px) { .about-hero { min-height:310px; }.about-hero-copy h1 { font-size:42px; }.about-main { padding:54px 20px; }.about-photo { padding:22px; }.about-photo::after { width:55px; height:55px; right:-8px; bottom:-8px; }.section-index { font-size:60px; }.journey { margin-bottom:62px; padding:32px 22px; }.value { padding:30px 25px; } }

/* Editorial split hero */
.about-hero { width:min(1320px,calc(100% - 24px)); min-height:405px; display:block; overflow:hidden; margin:16px auto 0; background:#f5f0e4; }
.about-hero::before { content:""; position:absolute; z-index:1; top:0; bottom:0; left:46%; width:120px; background:#f5f0e4; clip-path:polygon(0 0,100% 0,42% 100%,0 100%); }
.about-hero-image { left:45%; background:#d9c8a5; }.about-hero-image::after { background:linear-gradient(90deg,rgba(33,61,43,.18),rgba(33,61,43,.04)); }.about-hero-image img { object-position:center; filter:saturate(1.08) contrast(1.03); }
.about-hero-copy { display:flex; position:relative; z-index:2; width:48%; min-height:405px; align-items:flex-start; justify-content:center; flex-direction:column; margin:0; padding:42px 4% 42px max(6%,36px); color:var(--about-ink); }
.about-hero-copy small { display:flex; align-items:center; gap:10px; padding:0; border:0; border-radius:0; color:#a87510; background:transparent; font-size:10px; letter-spacing:2px; }.about-hero-copy small i { width:32px; height:1px; background:var(--about-red); }
.about-hero-copy h1 { max-width:600px; margin:17px 0; color:var(--about-green); text-shadow:none; font-size:clamp(45px,5.1vw,70px); letter-spacing:-2.5px; }.about-hero-copy p { max-width:440px; margin:0; color:#657167; font-size:15px; line-height:1.8; }
.about-hero-trust { display:flex; gap:30px; margin-top:22px; padding-top:15px; border-top:1px solid #ddcfb3; }.about-hero-trust span { display:block; }.about-hero-trust b { display:block; color:var(--about-green); font:700 17px Georgia,serif; }.about-hero-trust em { display:block; margin-top:4px; color:#8a9389; font-size:10px; font-style:normal; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
@media (max-width:800px) { .about-hero { width:calc(100% - 32px); min-height:500px; margin-top:16px; }.about-hero::before { top:auto; right:0; bottom:45%; left:0; width:auto; height:70px; clip-path:polygon(0 0,100% 60%,100% 100%,0 100%); }.about-hero-image { top:0; right:0; bottom:42%; left:0; }.about-hero-image::after { background:rgba(33,61,43,.2); }.about-hero-copy { width:100%; min-height:500px; justify-content:flex-end; padding:40px 8%; background:linear-gradient(180deg,transparent 40%,#f5f0e4 42%); text-align:left; }.about-hero-copy h1 { font-size:clamp(42px,8vw,60px); }.about-hero-copy p { max-width:550px; }.about-hero-trust { margin-top:24px; } }
@media (max-width:480px) { .about-hero { width:100%; margin-top:0; }.about-hero,.about-hero-copy { min-height:510px; }.about-hero-image { bottom:48%; }.about-hero-copy { padding:30px 24px; background:linear-gradient(180deg,transparent 43%,#f5f0e4 46%); }.about-hero-copy h1 { margin:12px 0; font-size:41px; }.about-hero-copy p { font-size:14px; line-height:1.65; }.about-hero-trust { gap:18px; margin-top:18px; padding-top:15px; }.about-hero-trust b { font-size:14px; }.about-hero-trust em { font-size:8px; } }

/* Clear food-image showcase for the About hero. */
.about-hero { height:400px; min-height:400px; box-sizing:border-box; padding:12px; background:linear-gradient(135deg,#f8f2e5,#ede3cd); }
.about-hero::before { display:none; }
.about-hero::after { content:""; position:absolute; z-index:0; width:155px; height:155px; right:42%; bottom:-78px; border:1px solid rgba(185,52,36,.28); border-radius:50%; box-shadow:0 0 0 18px rgba(244,200,94,.16); }
.about-hero-image { top:12px; right:12px; bottom:12px; left:49%; overflow:hidden; clip-path:none; border-radius:0 14px 14px 0; background:#d4c19b; box-shadow:0 16px 34px rgba(43,45,31,.18); }
.about-hero-image::after { background:transparent; }
.about-hero-image img { object-position:center center; filter:brightness(1.22) contrast(1.04) saturate(1.08); image-rendering:auto; }
.about-hero-copy { width:49%; min-height:376px; padding:28px 5% 28px max(5%,55px); }
.about-hero-copy h1 { max-width:520px; margin:12px 0; font-size:clamp(40px,4.4vw,58px); }
@media (max-width:800px) { .about-hero { min-height:560px; padding:10px; }.about-hero::after { right:8%; bottom:42%; }.about-hero-image { top:10px; right:10px; bottom:48%; left:10px; border-radius:10px; }.about-hero-copy { width:100%; min-height:540px; padding:42px 8%; background:linear-gradient(180deg,transparent 42%,#f8f2e5 44%); }.about-hero-image::after { background:rgba(18,48,34,.1); } }
@media (max-width:480px) { .about-hero { min-height:535px; padding:0; }.about-hero::after { display:none; }.about-hero-image { top:0; right:0; bottom:49%; left:0; border-radius:0; }.about-hero-copy { min-height:535px; padding:28px 24px; background:linear-gradient(180deg,transparent 42%,#f8f2e5 45%); }.about-hero-copy h1 { font-size:40px; } }

/* Journey section: a richer, editorial timeline card. */
.journey { position:relative; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:64px; overflow:hidden; margin-bottom:92px; padding:62px; border-radius:20px; background:linear-gradient(135deg,#163a2b 0%,#204936 58%,#17372a 100%); box-shadow:0 22px 46px rgba(27,58,42,.18); }
.journey::before { content:""; position:absolute; top:-110px; right:29%; width:260px; height:260px; border:1px solid rgba(246,198,82,.25); border-radius:50%; box-shadow:0 0 0 30px rgba(246,198,82,.05),0 0 0 60px rgba(246,198,82,.035); pointer-events:none; }
.journey-copy { position:relative; z-index:1; }
.journey-copy>small { display:flex; align-items:center; gap:10px; color:#f4c65b; }
.journey-copy>small::before { content:""; width:30px; height:1px; background:#dd482e; }
.journey-copy h2 { margin:13px 0 29px; font-size:clamp(38px,4vw,54px); }
.timeline-list { position:relative; gap:0; margin:0; }
.timeline-list::before { content:""; position:absolute; top:12px; bottom:12px; left:5px; width:1px; background:linear-gradient(#f5c559,rgba(245,197,89,.18)); }
.timeline-item { min-height:86px; padding:0 0 26px 30px; border:0; }
.timeline-item:last-child { min-height:0; padding-bottom:0; }
.timeline-item::before { top:6px; left:0; width:11px; height:11px; border:2px solid #193c2d; background:#f5c559; box-shadow:0 0 0 3px rgba(245,197,89,.18); }
.timeline-item strong { font:700 17px/1.2 Georgia,serif; }
.timeline-item em { margin:5px 0 8px; color:#f4c65b; }
.timeline-item p { max-width:455px; color:#e4eee6; }
.office-image { position:relative; z-index:1; min-height:320px; padding:10px; border:1px solid rgba(247,231,190,.55); border-radius:14px; background:#f8f0db; box-shadow:16px 18px 0 rgba(194,67,43,.86); transform:rotate(1.2deg); }
.office-image::before { content:"OUR\A JOURNEY"; position:absolute; z-index:2; right:20px; bottom:18px; padding:8px 10px; color:#17392a; background:#f6c45b; font-size:9px; font-weight:900; letter-spacing:1.6px; line-height:1.45; white-space:pre; }
.office-image img { height:320px; border-radius:7px; object-position:center; }
@media (max-width:800px) { .journey { grid-template-columns:1fr; gap:34px; padding:42px 28px; border-radius:14px; }.office-image { width:min(100%,460px); justify-self:center; }.journey::before { right:-80px; }.office-image img { height:290px; } }

/* Clean light timeline alternative. */
.journey { grid-template-columns:1fr minmax(330px,.82fr); gap:72px; margin-bottom:100px; padding:66px; border:1px solid #e8ddca; border-radius:0; color:var(--about-ink); background:#fffdf8; box-shadow:0 18px 38px rgba(52,42,27,.07); }
.journey::before { top:-85px; right:-85px; width:235px; height:235px; border:0; border-radius:50%; background:#f6dfa4; box-shadow:none; }
.journey::after { content:"2009"; position:absolute; right:33px; bottom:24px; color:rgba(32,61,43,.08); font:700 78px/.8 Georgia,serif; letter-spacing:-4px; }
.journey-copy { z-index:2; }
.journey-copy>small { color:#b87812; }
.journey-copy>small::before { background:#cf3527; }
.journey-copy h2 { margin:14px 0 34px; color:var(--about-green); }
.timeline-list::before { left:6px; background:linear-gradient(#d8a63e,rgba(216,166,62,.18)); }
.timeline-item { min-height:92px; padding-left:33px; }
.timeline-item::before { top:4px; left:0; border-color:#fffdf8; background:#cf3527; box-shadow:0 0 0 3px #f8e7bc; }
.timeline-item strong { color:var(--about-green); font:700 19px/1.2 Georgia,serif; }
.timeline-item em { color:#b87812; }
.timeline-item p { color:#6a756c; }
.office-image { z-index:2; min-height:335px; padding:0; overflow:hidden; border:0; border-radius:14px; background:#e6d2a1; box-shadow:none; transform:none; }
.office-image::before { right:18px; bottom:18px; padding:8px 11px; color:#fff; background:#cf3527; }
.office-image img { width:100%; height:335px; border-radius:0; object-position:center; }
@media (max-width:800px) { .journey { grid-template-columns:1fr; gap:34px; padding:44px 28px; }.journey::after { right:20px; bottom:16px; font-size:60px; }.office-image { width:100%; }.office-image img { height:290px; } }

/* Mission and vision cards. */
.values { gap:28px; margin-top:8px; }
.value { position:relative; min-height:260px; overflow:hidden; padding:46px 48px 42px; border:1px solid #eee5d6; border-top:5px solid #cf3527; background:linear-gradient(135deg,#fff 0%,#fffdf9 100%); box-shadow:0 15px 32px rgba(47,43,32,.08); transition:transform .25s,box-shadow .25s; }
.value:nth-child(2) { border-top-color:#e7b53e; background:linear-gradient(135deg,#fffefa 0%,#fffaf0 100%); }
.value::before { content:"01"; position:absolute; top:18px; right:24px; color:rgba(32,61,43,.06); font:700 88px/.8 Georgia,serif; letter-spacing:-5px; }
.value:nth-child(2)::before { content:"02"; color:rgba(190,133,22,.08); }
.value::after { content:""; position:absolute; width:74px; height:74px; right:-36px; bottom:-36px; border:1px solid rgba(207,53,39,.28); border-radius:50%; box-shadow:0 0 0 15px rgba(207,53,39,.055); }
.value:nth-child(2)::after { border-color:rgba(214,163,49,.4); box-shadow:0 0 0 15px rgba(214,163,49,.07); }
.value:hover { transform:translateY(-6px); box-shadow:0 22px 40px rgba(47,43,32,.13); }
.value span { position:relative; z-index:1; display:flex; align-items:center; gap:9px; color:#cf3527; }
.value span::before { content:""; width:22px; height:1px; background:currentColor; }
.value:nth-child(2) span { color:#b87812; }
.value h2 { position:relative; z-index:1; max-width:390px; margin:14px 0 18px; color:var(--about-green); font-size:clamp(30px,3vw,40px); }
.value p { position:relative; z-index:1; max-width:430px; color:#68756b; }
@media (max-width:800px) { .values { grid-template-columns:1fr; gap:20px; }.value { min-height:220px; padding:38px 30px; } }

/* Bold split-panel mission and vision treatment. */
.values { gap:0; overflow:hidden; border-radius:18px; box-shadow:0 20px 42px rgba(35,47,36,.14); }
.value,
.value:nth-child(2) { min-height:290px; padding:52px 54px; border:0; border-radius:0; background:#1d4030; box-shadow:none; }
.value:nth-child(2) { background:#e8b54b; }
.value::before { content:"MISSION"; top:28px; right:-23px; color:rgba(255,255,255,.08); font:800 46px/1 Arial,sans-serif; letter-spacing:4px; transform:rotate(90deg); }
.value:nth-child(2)::before { content:"VISION"; color:rgba(56,42,14,.12); }
.value::after { width:126px; height:126px; right:-55px; bottom:-55px; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 0 22px rgba(255,255,255,.06); }
.value:nth-child(2)::after { border-color:rgba(69,48,15,.25); box-shadow:0 0 0 22px rgba(69,48,15,.07); }
.value:hover { transform:none; box-shadow:none; }
.value span { color:#f3c85c; }
.value span::before { width:30px; }
.value:nth-child(2) span { color:#8a291f; }
.value h2 { max-width:330px; color:#fffdf6; font-size:clamp(31px,3.4vw,43px); }
.value p { max-width:350px; color:#dce8df; font-size:15px; }
.value:nth-child(2) h2 { color:#213b2f; }
.value:nth-child(2) p { color:#4e4a36; }
@media (max-width:800px) { .values { gap:0; border-radius:12px; }.value,.value:nth-child(2) { min-height:230px; padding:38px 30px; } }