.branch-page{background:var(--cream);overflow-x:hidden;line-height:1.7}
.branch-page .eyebrow{line-height:1.45}
.branch-page .site-header nav a{line-height:1.08}
.branch-page .site-header nav a[aria-current="page"]::after{transform:scaleX(1)}

/* Header + opening block always fits inside the first visible screen. */
.branch-opening{display:grid;grid-template-rows:minmax(0,1fr) auto;height:calc(100svh - 104px);min-height:0;overflow:hidden}

.branch-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;min-height:0;height:auto;padding:clamp(64px,8vh,110px) var(--gutter) clamp(58px,7vh,92px);overflow:hidden;background:var(--blue);color:var(--cream);isolation:isolate}
.branch-hero::before{content:"";position:absolute;inset:-15%;z-index:-2;background:radial-gradient(circle at 15% 25%,#ffffff18 0 1px,transparent 2px) 0 0/27px 27px,linear-gradient(125deg,transparent 0 64%,#1e659d 64% 100%);transform:rotate(-2deg)}
.branch-hero::after{content:"CAWANGAN";position:absolute;right:-.04em;bottom:-.19em;z-index:-1;font-family:var(--tall);font-size:clamp(112px,18.92vw,335.5px);line-height:.8;color:#ffffff0b;letter-spacing:-.04em}
.branch-hero__copy{max-width:980px}
.branch-hero .eyebrow{margin-bottom:18px;color:var(--yellow);font-size:clamp(13px,1.03vw,16px);letter-spacing:.2em}
.branch-hero h1{max-width:10ch;font-family:var(--tall);font-size:clamp(55px,6.36vw,113.5px);font-weight:400;line-height:1.02;letter-spacing:.012em}
.branch-hero h1 span{color:var(--yellow)}
.branch-hero__copy>p:last-child{max-width:620px;margin-top:28px;font-size:clamp(15px,1.03vw,17px);line-height:1.75}
.branch-hero__stamp{display:flex;flex:none;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;width:clamp(180px,17vw,270px);aspect-ratio:1;padding:clamp(18px,2vw,28px);border:3px solid var(--cream);border-radius:50%;text-align:center;transform:rotate(7deg);box-shadow:inset 0 0 0 8px var(--blue),inset 0 0 0 10px var(--cream)}
.branch-hero__stamp span{display:block;margin:0;font-family:var(--tall);font-size:clamp(62px,6.02vw,93px);font-weight:400;line-height:.78;color:var(--yellow)}
.branch-hero__stamp small{display:block;max-width:85%;margin-top:14px;font-family:var(--display);font-size:clamp(10px,0.82vw,15px);font-weight:800;line-height:1.08;letter-spacing:.055em}
.branch-hero__scroll{position:absolute;right:var(--gutter);bottom:25px;display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:.08em}
.branch-hero__scroll span{display:grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%}


.branch-directory{padding:clamp(75px,9vw,135px) var(--gutter);background:var(--cream);color:var(--ink)}
.branch-directory__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);align-items:end;gap:50px;max-width:1500px;margin:0 auto 55px}
.branch-directory__head .eyebrow{margin-bottom:14px;color:var(--red);letter-spacing:.18em}
.branch-directory__head h2{font-family:var(--tall);font-size:clamp(43px,5.16vw,75.5px);font-weight:400;line-height:1;letter-spacing:-.025em;color:var(--blue)}
.branch-directory__head h2 .section-dots,.career-intro h2 .section-dots{display:inline-block;margin-left:.04em;color:inherit;font-family:var(--body);font-size:.55em;font-weight:700;line-height:1;-webkit-text-stroke:0}
.branch-directory__head>p{max-width:560px;padding-bottom:7px;font-size:clamp(15px,1.03vw,17px);line-height:1.8}
.branch-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1500px;margin:0 auto 20px;padding:19px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:7px 7px 0 var(--yellow)}
.branch-page-search{display:flex;align-items:center;gap:12px;min-width:min(100%,360px);padding:0 18px;border-right:2px solid #d8d2c8}
.branch-page-search svg{flex:0 0 auto;fill:none;stroke:var(--red);stroke-width:2}
.branch-page-search input{width:100%;min-height:48px;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}
.branch-page-search input::placeholder{color:#78736b}
.branch-page-filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.branch-page-filters button{min-height:42px;padding:9px 15px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--display);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:.03em;transition:.18s ease}
.branch-page-filters button:hover,.branch-page-filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.branch-results{max-width:1500px;margin:35px auto 16px;font-family:var(--display);font-size:16px;font-weight:800;line-height:1.35;letter-spacing:.07em;color:var(--red)}
.branch-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1500px;margin:0 auto}
.branch-load-more{display:none}
.branch-load-more[hidden]{display:none}
.outlet-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:7px 7px 0 var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.outlet-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--yellow)}
.outlet-card__photo{position:relative;min-height:220px;overflow:hidden;background:var(--blue)}
.outlet-card__photo::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#2777b6 0 49%,#f8ce30 49% 72%,#d93823 72%)}
.outlet-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.outlet-card__placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px;color:#fff}
.outlet-card__placeholder img{position:static;width:92px;height:92px;object-fit:contain;border:3px solid var(--ink);border-radius:50%;background:#fff;padding:4px;transform:rotate(-7deg)}
.outlet-card__placeholder span{position:absolute;right:18px;bottom:15px;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.11em}
.outlet-card__state{position:absolute;top:16px;left:16px;padding:7px 11px;border:2px solid var(--ink);border-radius:99px;background:var(--cream);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.outlet-card__body{display:flex;flex:1;flex-direction:column;padding:25px}
.outlet-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.outlet-card h3{font-family:var(--tall);font-size:clamp(26.5px,2.24vw,37px);font-weight:400;line-height:1.1;color:var(--blue)}
.outlet-card__status{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.05em}
.outlet-card__status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.outlet-card__status.is-open{background:#e3f1dc;color:#2f6b1e}
.outlet-card__status.is-closed{background:#fbe1dd;color:var(--red)}
.outlet-card__status.is-unknown{background:#edeae4;color:#68645c}
.outlet-card__address{min-height:90px;margin:19px 0 14px;font-size:14px;line-height:1.75;color:#55514a}
.outlet-card__meta{display:grid;gap:8px;margin-bottom:20px;padding-top:15px;border-top:1px dashed #bcb5aa}
.outlet-card__meta p,.outlet-card__meta a{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.7}
.outlet-card__meta svg{flex:0 0 auto;margin-top:1px;fill:none;stroke:var(--red);stroke-width:1.8}
.outlet-card__actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:auto}
.outlet-card__actions a,.outlet-card__actions span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:9px 5px;border:2px solid var(--ink);border-radius:9px;background:#fff;color:var(--ink);font-family:var(--display);font-size:13px;font-weight:800;line-height:1.2;text-align:center;text-transform:uppercase;transition:.18s ease}
.outlet-card__actions a:hover{background:var(--ink);color:#fff}
.outlet-card__actions a:last-child{background:#20b768;color:#fff;border-color:#167f49}
.outlet-card__actions a:last-child:hover{background:#167f49}
.outlet-card__actions span{opacity:.45;cursor:not-allowed}
.outlet-card__actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.branch-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;max-width:1500px;margin:48px auto 0}
.branch-pagination[hidden]{display:none}
.branch-pagination button{display:inline-grid;place-items:center;min-width:46px;min-height:46px;padding:9px 13px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--display);font-size:14px;font-weight:800;line-height:1;letter-spacing:.04em;box-shadow:3px 3px 0 var(--ink);transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.branch-pagination button:hover:not(:disabled),.branch-pagination button[aria-current="page"]{background:var(--blue);color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--yellow)}
.branch-pagination button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.branch-pagination button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.branch-pagination__arrow{font-size:17px!important}
.branch-pagination__ellipsis{display:inline-grid;place-items:center;min-width:24px;min-height:46px;font-family:var(--display);font-size:17px;font-weight:800;line-height:1;color:var(--ink)}
.branch-page-empty{max-width:700px;margin:60px auto 0;padding:55px 25px;border:3px dashed var(--red);border-radius:18px;text-align:center}
.branch-page-empty strong{font-family:var(--tall);font-size:38.5px;font-weight:400;line-height:1.08;color:var(--red)}
.branch-page-empty p{margin:8px 0 22px}
.branch-page-empty button{padding:12px 20px;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-family:var(--display);font-weight:800}

.career-section{display:grid;grid-template-columns:minmax(310px,.75fr) minmax(0,1.25fr);gap:clamp(45px,7vw,100px);padding:clamp(80px,9vw,130px) var(--gutter);background:var(--red);color:var(--cream)}
.career-intro{align-self:center}
.career-intro .eyebrow{margin-bottom:16px;color:var(--yellow);letter-spacing:.18em}
.career-intro h2{font-family:var(--tall);font-size:clamp(43px,5.16vw,75.5px);font-weight:400;line-height:1;letter-spacing:-.025em}
.career-intro h2 .career-accent{color:var(--yellow)}
.career-intro>p:last-child{max-width:580px;margin-top:30px;font-size:clamp(15px,1.03vw,17px);line-height:1.8}
.career-board{align-self:center;overflow:hidden;border:3px solid var(--ink);border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:10px 10px 0 var(--yellow)}
.career-board__top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 25px;border-bottom:3px solid var(--ink);background:var(--blue);color:#fff}
.career-board__top>div{display:grid;gap:4px}
.career-board__top span{font-size:11px;font-weight:800;letter-spacing:.13em}
.career-board__top strong{font-family:var(--display);font-size:18px;line-height:1.25}
.career-board__badge{padding:8px 12px;border:2px solid var(--ink);background:var(--yellow);color:var(--red);transform:rotate(3deg)}
.career-empty{padding:clamp(45px,6vw,75px) 30px;text-align:center}
.career-empty>span{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 20px;border-radius:50%;background:var(--yellow);color:var(--red);font-size:26px}
.career-empty h3{font-family:var(--tall);font-size:clamp(32px,3.44vw,48px);font-weight:400;line-height:1.08;color:var(--blue)}
.career-empty p{max-width:530px;margin:16px auto 0;font-size:15px;line-height:1.75;color:#5c574f}
.career-list:not(:empty)+.career-empty{display:none}
.job-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:25px;border-bottom:2px solid #d5cec3}
.job-card:last-child{border-bottom:0}
.job-card__heading{display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px}
.job-card h3{font-family:var(--display);font-size:23px;line-height:1.2;color:var(--blue)}
.job-card__example{padding:4px 7px;border:1.5px solid var(--red);border-radius:99px;color:var(--red);font-size:9px;font-weight:800;letter-spacing:.12em;line-height:1}
.job-card p{font-size:14px;line-height:1.65;color:#5c574f}
.job-card__meta{margin-top:7px;font-weight:800;color:var(--red)!important}
.job-card__summary{margin-top:9px}
.job-card__note{margin-top:9px}
.job-card__note strong{color:var(--ink)}
.job-card__action{display:grid;align-self:center;justify-items:end;gap:9px;min-width:205px}
.job-card__phone{font-size:12px;font-weight:800;color:#5c574f}
.job-card a{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 17px;border:2px solid var(--ink);border-radius:99px;background:var(--yellow);font-family:var(--display);font-weight:800;line-height:1.2}
.job-card a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.branch-order-strip{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:clamp(65px,7vw,95px) var(--gutter);background:var(--yellow);color:var(--red)}
.branch-order-strip__script{display:block;margin-bottom:-8px;font-family:var(--script);font-size:clamp(29px,3.44vw,51.5px);text-transform:none}
.branch-order-strip h2{font-family:var(--tall);font-size:clamp(41.5px,5.16vw,74px);font-weight:400;line-height:.98}
.branch-order-strip>a{display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:min(100%,350px);padding:20px 24px;border:3px solid var(--ink);border-radius:99px;background:var(--red);color:#fff;font-family:var(--display);font-size:20px;font-weight:800;line-height:1.2;box-shadow:6px 6px 0 var(--ink);transition:.18s ease}
.branch-order-strip>a:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

@media(max-width:1100px){
  .branch-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .branch-tools{align-items:stretch;flex-direction:column}
  .branch-page-search{border-right:0;border-bottom:2px solid #d8d2c8}
  .branch-page-filters{justify-content:flex-start}
  .career-section{grid-template-columns:1fr}
  .career-intro{max-width:780px}
}
@media(max-width:800px){
  .branch-opening{height:calc(100svh - 88px)}
  .branch-hero{grid-template-columns:1fr;align-items:center;min-height:0;padding:clamp(48px,8vh,72px) var(--gutter) clamp(30px,5vh,48px)}
  .branch-hero h1{font-size:clamp(41.5px,calc(3.78vw + 32px),62px);line-height:1.08}
  .branch-hero__stamp{position:absolute;right:var(--gutter);bottom:35px;width:clamp(135px,18vw,160px);opacity:.88}
  .branch-hero__stamp span{font-size:53.5px}
  .branch-hero__stamp small{max-width:80%;margin-top:10px;font-size:9px;line-height:1.08}
  .branch-hero__copy>p:last-child{max-width:80%;margin-top:24px}
  .branch-hero__scroll{display:none}
  .branch-directory__head{grid-template-columns:1fr;gap:25px}
  .branch-directory__head>p{padding:0}
  .branch-order-strip{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .branch-hero__stamp{display:flex;right:14px;bottom:22px;width:clamp(104px,30vw,122px);height:clamp(104px,30vw,122px);aspect-ratio:auto;padding:13px;border-width:2px;box-shadow:inset 0 0 0 5px var(--blue),inset 0 0 0 7px var(--cream)}
  .branch-hero__stamp span{font-size:clamp(32.5px,9.46vw,39.5px);line-height:.76}
  .branch-hero__stamp small{max-width:92%;margin-top:7px;font-size:clamp(6.5px,1.55vw,8px);line-height:1.08;letter-spacing:.025em}
  .branch-hero .eyebrow{margin-bottom:14px;font-size:12px;line-height:1.55}
  .branch-hero__copy>p:last-child{max-width:62%;margin-top:20px;font-size:15px;line-height:1.7}
  .branch-directory__head h2,.career-intro h2{font-size:clamp(32.5px,8.6vw,41.5px);line-height:1.06}
  .branch-directory__head h2 .section-dots,.career-intro h2 .section-dots{font-size:.5em}
  .branch-directory__head>p,.career-intro>p:last-child{line-height:1.8}
  .branch-page-grid{grid-template-columns:1fr}
  .branch-load-more:not([hidden]){display:flex;align-items:center;justify-content:center;gap:12px;width:min(100%,400px);min-height:52px;margin:36px auto 0;padding:13px 22px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);color:var(--ink);font-family:var(--display);font-size:16px;font-weight:800;line-height:1.25;letter-spacing:.03em;box-shadow:4px 4px 0 var(--ink)}
  .branch-load-more:hover{background:var(--cream)}
  .branch-load-more:focus-visible{outline:3px solid var(--red);outline-offset:4px}
  .branch-tools{padding:13px;border-radius:14px;box-shadow:5px 5px 0 var(--yellow)}
  .branch-page-search{padding:0 8px}
  .branch-page-filters{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 7px;scrollbar-width:none}
  .branch-page-filters::-webkit-scrollbar{display:none}
  .branch-page-filters button{flex:0 0 auto}
  .outlet-card__photo{min-height:190px}
  .outlet-card__body{padding:21px}
  .outlet-card h3{font-size:29px;line-height:1.12}
  .outlet-card__address{min-height:0}
  .branch-pagination{display:none!important}
  .career-board__top{align-items:flex-start}
  .career-board__badge{font-size:9px!important}
  .job-card{grid-template-columns:1fr}
  .job-card__action{justify-items:start;min-width:0}
  .branch-order-strip>a{min-width:100%}
}
@media(max-height:700px) and (min-width:801px){
  .branch-hero{padding-top:45px;padding-bottom:48px}
  .branch-hero h1{font-size:clamp(53.5px,6.88vw,96.5px)}
  .branch-hero__copy>p:last-child{margin-top:22px;line-height:1.5}
  .branch-hero__stamp{width:180px}
}
@media(prefers-reduced-motion:reduce){.outlet-card,.branch-order-strip>a{transition:none}}
.tbg-scroll-top{z-index:95;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tbg-scroll-top::after{content:"";position:absolute;inset:-10px;border-radius:50%}

/* Order online links per branch (js/outlet-links.js) */
.outlet-card__order{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;padding-top:14px;border-top:1px dashed #d8c9b3}
.outlet-card__order-label{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6b6157}
.outlet-card__order-links{display:flex;flex-wrap:wrap;gap:6px}
.outlet-card__platform{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;border:2px solid var(--ink);color:#fff;font-family:var(--display);font-weight:800;font-size:13px;text-decoration:none;transition:translate .15s ease, box-shadow .15s ease}
.outlet-card__platform:hover{translate:0 -2px;box-shadow:0 3px 0 var(--ink)}
.outlet-card__platform--grabfood{background:#3fb44a}
.outlet-card__platform--foodpanda{background:#e23377}
.outlet-card__platform--shopeefood{background:#ee6526}

/* Order online pills v2 (4 Oct): simple & clean — soft tint, colour dot, no heavy border */
.outlet-card__order{gap:8px 12px;padding-top:12px;border-top:1px solid #ece4d8}
.outlet-card__order-label{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.1em;color:#8a8178}
.outlet-card__order-links{gap:6px}
.outlet-card__platform{--c:#2777b6;gap:6px;min-height:32px;padding:0 12px 0 10px;border:1px solid color-mix(in srgb,var(--c) 22%,transparent);border-radius:999px;background:color-mix(in srgb,var(--c) 9%,#fff);color:color-mix(in srgb,var(--c) 85%,#000);font-family:var(--body);font-weight:600;font-size:13px;transition:background .15s ease,color .15s ease,border-color .15s ease}
.outlet-card__platform::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.outlet-card__platform:hover{translate:none;box-shadow:none;background:var(--c);border-color:var(--c);color:#fff}
.outlet-card__platform:hover::before{background:#fff}
.outlet-card__platform--grabfood{--c:#3fb44a;background:color-mix(in srgb,#3fb44a 9%,#fff)}
.outlet-card__platform--foodpanda{--c:#e23377;background:color-mix(in srgb,#e23377 9%,#fff)}
.outlet-card__platform--shopeefood{--c:#ee6526;background:color-mix(in srgb,#ee6526 9%,#fff)}
.outlet-card__platform--grabfood:hover,.outlet-card__platform--foodpanda:hover,.outlet-card__platform--shopeefood:hover{background:var(--c)}
.outlet-card__platform:focus-visible{outline:2px solid var(--c);outline-offset:2px}