/* Syarikat Haji Yacob Tarudin — site styles */
/* Self-hosted fonts (no third-party requests) */
@font-face { font-family: "Saira Condensed"; src: url(fonts/saira-condensed-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url(fonts/saira-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url(fonts/saira-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #1E1C19;        /* charcoal from the profile */
  --char: #2B2926;       /* dark panels */
  --char-2: #37342F;
  --yellow: #F5C242;     /* profile yellow */
  --yellow-deep: #E0AA22;
  --gold: #B8923A;       /* logo gold */
  --paper: #FFFFFF;
  --mist: #F1F0EC;
  --line: #DEDBD3;
  --muted: #5F5A51;
  --on-dark: #F3F1EC;
  --on-dark-muted: #B7B1A6;
  --display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow-deep); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 700; }
h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; }
h3 { font-size: 24px; font-weight: 600; }
p { margin: 0; }
.hl { color: var(--yellow); }
.on-light .hl { color: var(--yellow-deep); }
.eyebrow {
  font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.lead { font-size: 19px; color: var(--muted); max-width: 62ch; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--ink); color: var(--on-dark);
  border-bottom: 3px solid var(--yellow);
}
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 48px; height: 48px; }
.brand b { font: 700 20px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; display: block; }
.brand small { font: 500 12px/1.2 var(--body); color: var(--on-dark-muted); letter-spacing: .08em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  white-space: nowrap; text-decoration: none; font: 600 16px/1 var(--body); padding: 10px 12px;
  color: var(--on-dark-muted); border-radius: 2px;
}
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current="page"] { color: var(--yellow); }
.nav a.nav-cta { background: var(--yellow); color: var(--ink); margin-left: 8px; }
.nav a.nav-cta:hover { background: var(--on-dark); }

.menu { display: none; }
.menu summary {
  list-style: none; cursor: pointer; font: 600 15px/1 var(--body);
  padding: 11px 14px; border: 1px solid #55514a; color: var(--on-dark);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.menu .panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink); border-bottom: 3px solid var(--yellow);
  padding: 8px var(--gutter) 18px; display: grid;
}
.menu .panel a {
  text-decoration: none; padding: 14px 0; border-bottom: 1px solid #3a3732;
  font: 600 22px/1 var(--display); letter-spacing: .02em;
}
.menu .panel a[aria-current="page"] { color: var(--yellow); }

@media (max-width: 1060px) {
  .nav { display: none; }
  .menu { display: block; }
}

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font: 600 17px/1 var(--body);
  padding: 15px 22px; border: 2px solid transparent; border-radius: 2px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--paper); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-dark { background: var(--ink); color: var(--on-dark); }
.btn-dark:hover { background: var(--char-2); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--on-dark); }
.btn-wa { background: #15803D; color: #fff; }
.btn-wa:hover { background: #11703A; }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; color: var(--on-dark); background: var(--ink);
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(30,28,25,.96) 0%, rgba(30,28,25,.86) 42%, rgba(30,28,25,.35) 75%, rgba(30,28,25,.15) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(64px, 10vw, 120px); display: grid; gap: 26px; }
.hero h1 { max-width: 15ch; }
.hero p.sub { font-size: 19px; color: #D9D4CA; max-width: 50ch; }
.since {
  display: inline-flex; align-items: center; gap: 12px; width: fit-content;
  font: 600 14px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow);
}
.since::before { content: ""; width: 34px; height: 3px; background: var(--yellow); }
@media (max-width: 700px) {
  .hero::after { background: linear-gradient(180deg, rgba(30,28,25,.72) 0%, rgba(30,28,25,.94) 60%); }
}

/* Figures strip */
.figures { background: var(--yellow); color: var(--ink); }
.figures .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.fig { padding: 26px 20px 24px; border-left: 1px solid rgba(30,28,25,.2); display: grid; gap: 4px; align-content: start; }
.fig:first-child { border-left: 0; padding-left: 0; }
.fig b { font: 700 46px/1 var(--display); font-variant-numeric: tabular-nums; }
.fig span { font-size: 15px; line-height: 1.35; }
@media (max-width: 800px) {
  .figures .wrap { grid-template-columns: repeat(2, 1fr); }
  .fig:nth-child(3) { border-left: 0; padding-left: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid rgba(30,28,25,.2); }
}

/* ---------- Page header (inner pages) ---------- */
.page-head { background: var(--char); color: var(--on-dark); position: relative; overflow: hidden; }
.page-head .wrap { padding-block: clamp(44px, 7vw, 76px); display: grid; gap: 16px; position: relative; z-index: 1; }
.page-head p { color: #D2CCC1; font-size: 19px; max-width: 60ch; }
.page-head .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(1);
}

/* ---------- Sections ---------- */
section.block { padding-block: clamp(56px, 8vw, 96px); }
section.alt { background: var(--mist); }
section.dark { background: var(--ink); color: var(--on-dark); }
section.dark .lead { color: var(--on-dark-muted); }
.sec-head { display: grid; gap: 12px; margin-bottom: 36px; }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split img { width: 100%; height: 100%; object-fit: cover; max-height: 460px; }
.split .txt { display: grid; gap: 18px; align-content: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Service tiles */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc { background: var(--paper); padding: 26px 24px 28px; display: grid; gap: 10px; align-content: start; }
.svc .ico { width: 42px; height: 42px; color: var(--ink); }
.svc h3 { font-size: 25px; }
.svc p { color: var(--muted); font-size: 16px; }
.svc ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.svc li { font-size: 13px; line-height: 1; padding: 6px 8px; background: var(--mist); color: #3f3b35; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .svc-grid { grid-template-columns: 1fr; } }
a.svc { text-decoration: none; transition: background .15s; }
a.svc:hover { background: #FFF7DD; }
.more { font-weight: 600; font-size: 15px; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.more svg { width: 16px; height: 16px; flex: none; }
.svc .more { margin-top: 14px; }

/* Link cards (home) */
.go-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.go {
  display: grid; grid-template-rows: 170px auto; text-decoration: none; background: var(--char); color: var(--on-dark);
  overflow: hidden;
}
.go img { width: 100%; height: 170px; object-fit: cover; transition: transform .3s; }
.go:hover img { transform: scale(1.04); }
.go div { padding: 18px 20px 22px; display: grid; gap: 6px; border-top: 3px solid var(--yellow); }
.go h3 { font-size: 26px; }
.go p { font-size: 15px; color: var(--on-dark-muted); }
@media (max-width: 960px) { .go-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .go-grid { grid-template-columns: 1fr; } }

/* Clients */
.clients { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; border-top: 1px solid var(--line); }
.client { padding: 22px 18px 22px 0; display: grid; gap: 6px; align-content: start; border-bottom: 1px solid var(--line); }
.client b { font: 700 30px/1 var(--display); letter-spacing: .02em; }
.client span { font-size: 14px; color: var(--muted); line-height: 1.35; }
@media (max-width: 900px) { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clients { grid-template-columns: 1fr; } }
.client-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.client-row { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.client-row b { font: 700 30px/1 var(--display); overflow-wrap: anywhere; }
.client-row h3 { font-size: 22px; margin-bottom: 6px; }
.client-row p { color: var(--muted); max-width: 70ch; }
@media (max-width: 560px) { .client-row { grid-template-columns: 1fr; gap: 6px; } }

/* Borang band */
.band { background: var(--yellow); }
.band .wrap { padding-block: 34px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.band h2 { font-size: clamp(28px, 3.6vw, 38px); }
.band p { color: #3d3a33; max-width: 60ch; margin-top: 6px; }

/* ---------- About ---------- */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--yellow); }
.vm > div { background: var(--char); padding: clamp(28px, 4vw, 44px); display: grid; gap: 14px; align-content: start; }
.vm h3 { font-size: 34px; color: var(--yellow); }
.vm p { color: #DDD8CE; font-size: 18px; }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } }

.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.role { border-top: 3px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.role h3 { font-size: 24px; }
.role p { font-size: 15px; color: var(--muted); }
.roles.reasons { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
@media (max-width: 900px) { .roles, .roles.reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .roles, .roles.reasons { grid-template-columns: 1fr; } }

.prose { display: grid; gap: 16px; max-width: 68ch; }
.prose p { color: #3b3832; }

/* ---------- Projects ---------- */
.proj { border-top: 2px solid var(--ink); }
.proj-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.proj-row .yr { font: 600 20px/1.2 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.proj-row .nm { font-size: 17px; }
.proj-row .tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.proj-row.live .yr { color: #15803D; }
.pill { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; background: #DCF3E3; color: #14632F; white-space: nowrap; }
@media (max-width: 640px) {
  .proj-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .proj-row .yr { grid-column: 1; }
  .proj-row .nm { grid-column: 1 / -1; }
  .proj-row .tag { grid-row: 1; grid-column: 2; }
}

.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.award { background: var(--char-2); padding: 20px 22px 22px; display: grid; gap: 10px; align-content: start; }
.award b { font: 700 38px/1 var(--display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.award ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #DDD8CE; font-size: 15px; line-height: 1.4; }

/* ---------- Fleet ---------- */
.veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.veh { background: var(--paper); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; }
.veh img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.veh div { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start; }
.veh h3 { font-size: 25px; }
.veh p { font-size: 15px; color: var(--muted); }

.equip { width: 100%; border-collapse: collapse; font-size: 17px; }
.equip-wrap { overflow-x: auto; }
.equip th, .equip td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); }
.equip th { font: 600 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.equip td.n { font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; width: 90px; }
.equip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 760px) { .equip-cols { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.cards { display: grid; gap: 14px; }
.c-card { border: 1px solid var(--line); padding: 20px 22px; display: grid; gap: 6px; background: var(--paper); }
.c-card .lbl { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.c-card .val { font: 600 26px/1.2 var(--display); letter-spacing: .01em; overflow-wrap: anywhere; }
.c-card .val a { text-decoration: none; }
.c-card .val a:hover { text-decoration: underline; text-underline-offset: 4px; }
.c-card.wa { background: #F1FBF4; border-color: #BFE6CB; }
.c-card .btns { margin-top: 8px; }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hours tr.off td:last-child { color: var(--muted); font-weight: 400; }
.addr { font-size: 18px; line-height: 1.5; }
.map-card { background: var(--char); color: var(--on-dark); display: grid; }
.map-card img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.map-card div { padding: 22px 24px 24px; display: grid; gap: 14px; }

/* ---------- Footer ---------- */
footer.foot { background: var(--ink); color: var(--on-dark-muted); font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 52px 36px; }
.foot h4 { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin: 0 0 14px; }
.foot a { text-decoration: none; color: var(--on-dark); }
.foot a:hover { color: var(--yellow); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot .fbrand { display: grid; gap: 14px; align-content: start; }
.foot .fbrand img { width: 72px; height: 72px; }
.foot .base { border-top: 1px solid #3a3732; padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14px; }
@media (max-width: 860px) { .foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot .cols { grid-template-columns: 1fr; } }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: #15803D; color: #fff; font: 600 15px/1 var(--body);
  padding: 13px 18px 13px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.wa-float svg { width: 24px; height: 24px; }
.wa-float:hover { background: #11703A; }
@media (max-width: 520px) { .wa-float span { display: none; } .wa-float { padding: 14px; } }

/* Address links */
a.map-link { text-decoration: underline; text-decoration-color: rgba(245,194,66,.6); text-underline-offset: 4px; }
a.map-link:hover { color: var(--yellow); }
.plabel { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.postal { font-size: 16px; color: var(--on-dark-muted); line-height: 1.5; }

/* Figures: rise and count up on scroll (only when JS runs and motion is allowed) */
.figures.js-anim .fig { opacity: 0; transform: translateY(28px) scale(.94); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.9,.25,1.15); }
.figures.js-anim.in .fig { opacity: 1; transform: none; }
.figures.js-anim.in .fig:nth-child(2) { transition-delay: .15s; }
.figures.js-anim.in .fig:nth-child(3) { transition-delay: .3s; }
.figures.js-anim.in .fig:nth-child(4) { transition-delay: .45s; }
.fig.done b { animation: fig-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes fig-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.fig b { display: inline-block; transform-origin: left bottom; }
@media (prefers-reduced-motion: reduce) { .fig.done b { animation: none; } }

/* Scroll reveal (added by script only when motion is allowed) */
.reveal-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-on .reveal.shown { opacity: 1; transform: none; }
.reveal-on .go.reveal:hover img { transform: scale(1.04); }

/* ---------- v2 additions ---------- */
.brand b { font-size: 21px; }
@media (max-width: 480px) { .brand b { font-size: 18px; } .brand img { width: 40px; height: 40px; } }

/* Featured waste collection */
.feature-wrap { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.feature-wrap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--yellow); }
.feature { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature .txt { display: grid; gap: 18px; align-content: start; }
.feature .lead { color: #D9D4CA; }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--yellow); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; color: var(--on-dark); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); transform: rotate(-45deg); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* Timeline */
.tl-item b { font: 700 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.tl-item p { font-size: 15px; color: var(--muted); line-height: 1.45; }
.jawi { font-size: 26px; color: var(--gold); text-align: left; font-family: "Noto Naskh Arabic", "Geeza Pro", "Arial", serif; }

/* Policies */
.pols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pol { border: 1px solid var(--line); padding: 24px 26px 26px; display: grid; gap: 14px; align-content: start; }
.pol h3 { font-size: 26px; }
.pol ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #3b3832; }
@media (max-width: 760px) { .pols { grid-template-columns: 1fr; } }

/* Logo story */
.logo-story { display: grid; grid-template-columns: 180px 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.logo-story .txt { display: grid; gap: 14px; }
@media (max-width: 560px) { .logo-story { grid-template-columns: 1fr; } .logo-story img { width: 130px; height: 130px; } }

/* Gallery */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gal figure { margin: 0; position: relative; overflow: hidden; background: var(--char); }
.gal img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s; }
.gal figure:hover img { transform: scale(1.05); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(20,18,16,.85)); }
@media (max-width: 860px) { .gal { grid-template-columns: repeat(2, 1fr); } }

/* Current contracts */
.cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cur { border: 1px solid var(--line); border-top: 4px solid #15803D; padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; grid-template-columns: auto 1fr; }
.cur .pill { justify-self: start; }
.cur .cat { justify-self: end; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); align-self: center; }
.cur h3, .cur p { grid-column: 1 / -1; }
.cur h3 { font-size: 23px; line-height: 1.15; }
.cur p { font-size: 15px; color: var(--muted); }
.proj-row .tag { text-align: right; }

/* Callout */
.callout { background: var(--yellow); padding: clamp(24px, 4vw, 40px); display: grid; gap: 12px; max-width: 900px; }
.callout .eyebrow { color: var(--ink); }
.callout p { font: 600 clamp(20px, 2.4vw, 26px)/1.35 var(--display); letter-spacing: .01em; }

/* Apply */
.apply { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.apply .txt { display: grid; gap: 18px; }
.apply .lead a { color: var(--yellow); }
.apply img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 860px) { .apply { grid-template-columns: 1fr; } }

/* Social icons */
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #4a463f; color: var(--on-dark); }
.social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.social svg { width: 20px; height: 20px; }
.social-list { display: grid; gap: 10px; margin-top: 4px; }
.social-list a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.social-list a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.social-list svg { width: 22px; height: 22px; flex: none; color: var(--ink); }

/* ---------- Loading screen ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink); color: var(--on-dark);
  display: grid; place-content: center; justify-items: center; gap: 22px;
  padding: 24px;
  transition: transform .7s cubic-bezier(.7,0,.2,1), opacity .7s ease;
  animation: ld-failsafe .4s ease 6s forwards;
}
#loader::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); }
.no-loader #loader { display: none; }
#loader.ld-out { transform: translateY(-100%); }
.ld-mark { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.ld-logo { width: 150px; height: 150px; overflow: visible; animation: ld-turn 1.6s cubic-bezier(.2,.8,.2,1) both, ld-glow 1.2s ease 1.7s both; }
.lp { fill: #B79C57; fill-opacity: 0; stroke: #E6C774; stroke-width: 150; stroke-linejoin: round;
      stroke-dasharray: 1 1; stroke-dashoffset: 1;
      animation: ld-draw 1s cubic-bezier(.5,0,.3,1) both, ld-fillin .6s ease both; }
.lp-r1 { animation-delay: .1s, 1.25s; }
.lp-r2 { animation-delay: .3s, 1.35s; }
.lp-m1 { animation-delay: .55s, 1.45s; }
.lp-m2 { animation-delay: .7s, 1.55s; }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-fillin { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes ld-turn { from { transform: rotate(-70deg) scale(.82); } to { transform: none; } }
@keyframes ld-glow { 0% { filter: none; } 45% { filter: drop-shadow(0 0 14px rgba(245,194,66,.55)); } 100% { filter: none; } }
.ld-name {
  font: 700 clamp(20px, 5vw, 28px)/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  animation: ld-rise .7s ease 1.35s both;
}
.ld-bar { width: min(220px, 60vw); height: 3px; background: rgba(255,255,255,.12); overflow: hidden; animation: ld-rise .5s ease .1s both; }
.ld-bar i { display: block; height: 100%; width: 100%; background: var(--yellow); transform-origin: left; animation: ld-fill 1.4s cubic-bezier(.4,0,.2,1) .2s both; }
@keyframes ld-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ld-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ld-failsafe { to { opacity: 0; visibility: hidden; } }

/* Key projects: past items use a neutral year tag */
.cur.past { border-top-color: var(--ink); }
.pill.yrs { background: var(--mist); color: var(--ink); }
/* Lock scrolling while the loading screen is up */
html.loading, html.loading body { overflow: hidden; }

/* Award photos (projects page) */
.award-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.award-photos figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.award-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--yellow); }
.award-photos figcaption { font-size: 14px; color: var(--on-dark-muted); }
@media (max-width: 700px) { .award-photos { grid-template-columns: 1fr; } }

/* Gallery video + portrait apply photo */
.gal video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.apply img { aspect-ratio: 4 / 5; max-height: 560px; object-position: center 60%; }
.c-card .note { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: 8px; vertical-align: middle; }
.map-card .sat { margin: 0; position: relative; }
.map-card .sat img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.map-card .sat figcaption { position: absolute; right: 0; bottom: 0; padding: 3px 8px; font-size: 11px; color: #eee; background: rgba(0,0,0,.55); }
.map-card > div { padding: 22px 24px 24px; display: grid; gap: 14px; }

/* Quick loader on inner pages: logo only, pops up then draws itself */
#loader.ld-quick { gap: 0; }
#loader.ld-quick .ld-name, #loader.ld-quick .ld-bar { display: none; }
#loader.ld-quick .ld-logo { animation: ld-appear .4s cubic-bezier(.2,.9,.3,1.3) both, ld-glow .9s ease 1.15s both; }
#loader.ld-quick .lp { animation: ld-draw .7s cubic-bezier(.5,0,.3,1) both, ld-fillin .45s ease both; }
#loader.ld-quick .lp-r1 { animation-delay: .3s, .85s; }
#loader.ld-quick .lp-r2 { animation-delay: .4s, .9s; }
#loader.ld-quick .lp-m1 { animation-delay: .5s, .95s; }
#loader.ld-quick .lp-m2 { animation-delay: .6s, 1s; }
@keyframes ld-appear { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
#loader.ld-quick .lp { fill-opacity: .2; }

/* Privacy notice */
.policy { max-width: 760px; display: grid; gap: 14px; }
.policy h2 { font-size: 30px; margin-top: 22px; }
.policy p, .policy li { color: #3b3832; }
.policy ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.policy ul.plain { list-style: none; padding-left: 0; }
.policy a { color: var(--ink); text-underline-offset: 3px; }
.policy .updated { font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.note-sm { font-size: 14px; color: var(--on-dark-muted); }
.note-sm a { color: var(--yellow); }
.foot .base a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Waste collection ---------- */
.areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.area { border-top: 4px solid var(--yellow); background: var(--mist); padding: 18px 18px 20px; display: grid; gap: 6px; align-content: start; }
.area b { font: 700 28px/1 var(--display); }
.area span { font-size: 15px; color: var(--muted); }
@media (max-width: 960px) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .areas { grid-template-columns: 1fr; } }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px; }
.steps li { counter-increment: s; position: relative; padding-left: 52px; color: #3b3832; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); font: 700 20px/1 var(--display); }
.steps b { color: var(--ink); }
.rate-note { font-size: 15px; color: var(--muted); border-left: 3px solid var(--yellow); padding-left: 12px; }
.pol-note { margin-top: 6px; font-size: 15px; color: var(--muted); }
.pol-note a { color: var(--ink); }

/* ---------- News ---------- */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.post { display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 1px solid var(--line); }
.post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post > div { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.post .date { font: 600 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.post h3 { font-size: 28px; }
.post p { color: var(--muted); font-size: 16px; }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; display: grid; gap: 10px; }
.qa { border: 1px solid var(--line); background: var(--paper); }
.qa summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; font: 600 24px/1.2 var(--display); position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font: 700 22px/1 var(--body); }
.qa[open] summary::after { content: "–"; }
.qa[open] summary { border-bottom: 1px solid var(--line); }
.qa .ans { padding: 16px 20px 20px; color: #3b3832; }
.qa .ans a, .faq .lead a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- 404 ---------- */
.nf { background: var(--ink); color: var(--on-dark); }
.nf .wrap { padding-block: clamp(80px, 14vw, 160px); display: grid; gap: 20px; justify-items: start; }
.nf .lead { color: var(--on-dark-muted); }

/* nav now has more items: switch to the menu a bit earlier */
@media (max-width: 1200px) { .nav { display: none; } .menu { display: block; } }

/* ---------- cookie consent ---------- */
.cookie { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 420px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--yellow);
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 18px 20px; display: grid; gap: 14px;
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.cookie.on { opacity: 1; transform: none; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: 15px; line-height: 1.5; }
.cookie a { color: var(--ink); text-decoration: underline; }
.cookie-btns { display: flex; gap: 10px; justify-content: flex-end; }
.cookie .btn { padding: 10px 18px; font-size: 15px; }
.base-links a { color: inherit; }
@media (max-width: 560px) { .cookie { left: 12px; right: 12px; max-width: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- services tabs ---------- */
.tabs { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 75px; z-index: 15; }
.tabs .wrap { display: flex; gap: 6px; overflow-x: auto; }
.tab { display: inline-block; padding: 16px 18px 14px; font-family: var(--display); font-weight: 600; font-size: 19px;
  letter-spacing: .3px; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 4px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--yellow); }
html:not(.has-tabs) .tabs { display: none; }
.tab-panel[hidden] { display: none; }
.areas-title { font-family: var(--display); font-size: 24px; margin: 36px 0 4px; }
.areas-note { color: var(--muted); margin: 0 0 18px; }

/* ---------- enquiry form ---------- */
.enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.enquiry .ticks { margin-top: 18px; }
.enquiry .ticks li { color: var(--ink); }
.enquiry .ticks li::before { border-color: var(--gold); }
.enq-alt { margin-top: 22px; color: var(--muted); }
.enq-alt a { color: var(--ink); font-weight: 600; }
.form-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--yellow); padding: 8px; }
.form-card iframe { display: block; width: 100%; height: 900px; border: 0; }
@media (max-width: 900px) { .enquiry { grid-template-columns: 1fr; } .form-card iframe { height: 1000px; } }
.form-wide { max-width: 860px; }

/* ---------- back to top ---------- */
.to-top { position: fixed; right: 22px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 29;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--ink); color: var(--yellow); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s; }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--char-2); }
.to-top:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 520px) { .to-top { right: 21px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } }

/* ---------- private borang page ---------- */
.priv-top { background: var(--ink); border-bottom: 3px solid var(--yellow); }
.priv-top .wrap { display: flex; align-items: center; gap: 12px; min-height: 68px; color: var(--on-dark);
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.priv { background: var(--mist); padding: clamp(32px, 6vw, 64px) 0; min-height: 80vh; }
.priv h1 { font-size: clamp(32px, 5vw, 48px); margin: 8px 0 12px; }
.priv .lead .en { color: var(--muted); font-size: 16px; }
.priv .form-card { max-width: 860px; margin-top: 24px; }
.priv-help { margin-top: 18px; color: var(--muted); font-size: 15px; }
.priv-help a { color: var(--ink); font-weight: 600; }

/* ---------- wide photo in sections ---------- */
.wide-photo { margin: 0 0 28px; display: grid; gap: 10px; }
.wide-photo img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: center 55%; }
.wide-photo figcaption { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .wide-photo img { aspect-ratio: 4 / 3; } }

/* ---------- community strip (About) ---------- */
.community { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.community figure { margin: 0; display: grid; gap: 8px; }
.community img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.community figcaption { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .community { grid-template-columns: 1fr; } }

/* ---------- brand photo tone: slightly muted, warm, deeper ---------- */
main img:not([src$=".svg"]):not(.bg), .gal video { filter: saturate(.75) contrast(1.08) brightness(.84) sepia(.12); }
.go img { filter: saturate(.7) contrast(1.08) brightness(.66) sepia(.14) !important; }
.go:hover img { filter: saturate(.8) contrast(1.06) brightness(.8) sepia(.1) !important; }
.hero-img { filter: saturate(.7) contrast(1.06) brightness(.82) sepia(.15); }

/* ---------- brand gradient over photos: black at the base, a touch of gold at the top ---------- */
:root { --photo-grad: linear-gradient(200deg, rgba(184,146,58,.42) 0%, rgba(184,146,58,0) 45%), linear-gradient(0deg, rgba(20,19,17,.6) 0%, rgba(20,19,17,0) 60%); }
.go { position: relative; }
.go::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; background: var(--photo-grad); pointer-events: none; z-index: 1; }
.gal figure::before, .wide-photo::before, .community figure::before, .award-photos figure::before, .map-card .sat::before {
  content: ""; position: absolute; inset: 0; background: var(--photo-grad); pointer-events: none; z-index: 1;
}
.wide-photo, .community figure, .award-photos figure { position: relative; }
.wide-photo::before { bottom: 34px; }
.community figure::before { bottom: 30px; }
.award-photos figure::before { inset: 3px 3px auto 3px; aspect-ratio: 4 / 3; }
.gal figcaption { z-index: 2; }

/* ---------- 1. slow zoom on home banner ---------- */
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero-img { animation: kb 22s ease-out forwards; transform-origin: 60% 50%; }

/* ---------- 3. client marquee ---------- */
.marquee { background: var(--ink); border-block: 1px solid rgba(243,241,236,.08); overflow: hidden; padding-block: 18px; }
.mq-track { display: flex; width: max-content; animation: mq 45s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track ul { list-style: none; margin: 0; padding: 0; display: flex; }
.mq-track li { white-space: nowrap; color: var(--on-dark-muted); font-size: 16px; padding-inline: 28px; display: flex; align-items: center; gap: 10px; }
.mq-track li b { font: 700 22px/1 var(--display); color: var(--yellow); letter-spacing: .02em; }
.mq-track li::after { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); margin-left: 46px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- 6. lightbox ---------- */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(14,13,12,.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; opacity: 0; transition: opacity .2s ease;
  padding: env(safe-area-inset-top, 0px) 8px env(safe-area-inset-bottom, 0px); }
.lb.on { opacity: 1; }
.lb figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.lb img { max-width: 100%; max-height: 80vh; object-fit: contain; filter: none !important; }
.lb figcaption { color: var(--on-dark); font-size: 16px; text-align: center; }
.lb button { background: none; border: 0; color: var(--on-dark); font-size: 44px; line-height: 1; cursor: pointer; width: 56px; height: 56px; border-radius: 50%; }
.lb button:hover { background: rgba(255,255,255,.08); color: var(--yellow); }
.lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
@media (max-width: 600px) { .lb { grid-template-columns: 40px 1fr 40px; } .lb button { width: 40px; font-size: 36px; } }

@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none; }
  .mq-track { animation: none; flex-wrap: wrap; width: auto; }
  .mq-track ul[aria-hidden] { display: none; }
  .mq-track ul { flex-wrap: wrap; justify-content: center; }
}

.lb[hidden] { display: none; }

/* ---------- milestone timeline: centre line that fills as you scroll ---------- */
.tl-wrap { position: relative; max-width: 1000px; margin: 0 auto; }
.tl-line, .tl-fill { position: absolute; left: 50%; top: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; }
.tl-line { bottom: 0; background: var(--line); }
.tl-fill { height: 100%; background: var(--yellow); transform-origin: top; transform: scaleY(var(--p, 1)); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; row-gap: 10px; }
.tl-item { position: relative; display: grid; gap: 6px; align-content: start; padding-block: 4px 18px; }
.tl-item:nth-child(odd) { grid-column: 1; text-align: right; }
.tl-item:nth-child(even) { grid-column: 2; margin-top: 70px; }
.tl-item::after { content: ""; position: absolute; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--yellow); box-sizing: border-box; transition: background .3s ease, transform .4s cubic-bezier(.3,1.6,.5,1); }
.tl-item:nth-child(odd)::after { right: -56px; }
.tl-item:nth-child(even)::after { left: -56px; }
.tl-item.lit::after { background: var(--yellow); transform: scale(1.25); }
.tl-js .tl-item { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.85,.25,1); }
.tl-js .tl-item:nth-child(odd) { transform: translateX(-24px); }
.tl-js .tl-item:nth-child(even) { transform: translateX(24px); }
.tl-js .tl-item.lit { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .tl-line, .tl-fill { left: 8px; }
  .timeline { grid-template-columns: 1fr; row-gap: 6px; }
  .tl-item:nth-child(odd), .tl-item:nth-child(even) { grid-column: 1; text-align: left; margin-top: 0; padding-left: 40px; }
  .tl-item:nth-child(odd)::after, .tl-item:nth-child(even)::after { left: 1px; right: auto; }
  .tl-js .tl-item:nth-child(odd), .tl-js .tl-item:nth-child(even) { transform: translateX(20px); }
}

/* =========================================================
   FREE-FLOW LAYOUT: floating pill header, full-screen hero
   ========================================================= */
.top { position: fixed; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top, 0px)); background: transparent; border-bottom: 0; padding-inline: var(--gutter); pointer-events: none; }
.top .wrap { pointer-events: auto; max-width: 1180px; min-height: 66px; padding: 0 10px 0 16px; border-radius: 999px;
  background: rgba(24,23,20,.78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(245,194,66,.28); box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: max-width .45s cubic-bezier(.2,.8,.2,1), border-radius .45s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; }

.brand img { width: 42px; height: 42px; }
.nav a { border-radius: 999px; }
.nav-cta { border-radius: 999px !important; }
.menu summary { border-radius: 999px; }
.menu .panel { top: calc(100% + 10px); border-radius: 24px; border: 1px solid rgba(245,194,66,.28); border-bottom-width: 1px; box-shadow: 0 16px 40px rgba(0,0,0,.4); overflow: hidden; }
.menu .panel a:last-child { border-bottom: 0; }

/* inner pages: clear the floating header */
.page-head .wrap { padding-top: calc(clamp(44px, 7vw, 76px) + 90px); }
.tabs { top: 88px; }
html { scroll-padding-top: 100px; }
.priv-top { position: static; }

/* home hero: full screen, centred, big type */
.hero { min-height: 100svh; min-height: 100vh; display: grid; align-items: center; }
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
.hero::after { background:
  radial-gradient(120% 90% at 50% 45%, rgba(20,19,17,.55) 0%, rgba(20,19,17,.82) 70%, rgba(20,19,17,.94) 100%),
  linear-gradient(200deg, rgba(184,146,58,.28) 0%, rgba(184,146,58,0) 45%) !important; }
.hero .wrap { justify-items: center; text-align: center; padding-block: 130px 90px; gap: 22px; }
.hero h1 { max-width: 13ch; font-size: clamp(46px, 8.6vw, 124px); line-height: .94; text-transform: uppercase; letter-spacing: -.005em; }
.hero p.sub { max-width: 46ch; margin-inline: auto; }
.hero .btns { justify-content: center; }
.hero .btn { border-radius: 999px; }
.hero::before { content: ""; position: absolute; left: 50%; bottom: 26px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(243,241,236,.55); border-radius: 14px; }
.hero .wrap::after { content: ""; position: absolute; left: 50%; bottom: -54px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--yellow); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@media (max-width: 700px) {
  .hero .wrap { padding-block: 120px 80px; }
  .hero::before, .hero .wrap::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero .wrap::after { animation: none; } }

/* softer, flowing surfaces */
.btn { border-radius: 999px; }
.go, .pol, .c-card, .map-card, .form-card, .qa, .area, .cur { border-radius: 18px; overflow: hidden; }
.gal figure, .community figure img, .wide-photo img, .award-photos img, .split > img { border-radius: 16px; }
.gal figure::before, .community figure::before, .wide-photo::before { border-radius: 16px; }

/* header snaps to a full-width bar once you scroll */
.top { transition: top .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1); }
.top.scrolled { top: env(safe-area-inset-top, 0px); padding-inline: 0; }
.top.scrolled .wrap { max-width: 100%; border-radius: 0; background: rgba(20,19,17,.95); border-color: transparent; border-bottom: 3px solid var(--yellow);
  padding-inline: max(var(--gutter), calc((100% - 1180px) / 2 + 16px)); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.top.scrolled .menu .panel { top: 100%; border-radius: 0 0 20px 20px; }
.tabs { top: 72px; transition: top .45s ease; }
@media (prefers-reduced-motion: reduce) { .top, .top .wrap { transition: none; } }

/* rolling digits on the home figures */
.fig b .odo { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.fig b .odo-reel { display: flex; flex-direction: column; will-change: transform; }
.fig b .odo-reel span { display: block; height: 1em; line-height: 1; text-align: center; }
.fig b .odo-sym { display: inline-block; line-height: 1; vertical-align: top; }
.fig b span { font-size: inherit; line-height: 1; color: inherit; }

@media (max-width: 1000px) { .community { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .community { grid-template-columns: 1fr; } }

/* ---------- photo style A: gold duotone, full colour on hover ---------- */
main img:not([src$=".svg"]):not(.bg):not(.hero-img), .gal video {
  filter: grayscale(1) sepia(.6) saturate(1.5) hue-rotate(-8deg) brightness(.82) contrast(1.08) !important;
  transition: filter .5s ease, transform .6s ease;
}
main figure:hover img, main figure:hover video, .split > img:hover, .go:hover img, .map-card:hover img, .gal figure:hover video {
  filter: saturate(.95) contrast(1.04) brightness(.95) !important;
}
.lb img { filter: none !important; }
@media (hover: none) {
  main figure:hover img, .split > img:hover, .go:hover img { filter: grayscale(1) sepia(.6) saturate(1.5) hue-rotate(-8deg) brightness(.82) contrast(1.08) !important; }
}
.go img { filter: grayscale(1) sepia(.6) saturate(1.5) hue-rotate(-8deg) brightness(.66) contrast(1.1) !important; }
@media (hover: hover) { .go:hover img { filter: saturate(.9) contrast(1.05) brightness(.82) !important; } }

/* ---------- cleaning section + before/after slider ---------- */
.clean-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.clean-row figure { margin: 0; position: relative; display: grid; gap: 8px; }
.clean-row figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
.clean-row figcaption { font-size: 14.5px; color: var(--muted); }
.ba { --x: 50%; position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.04) !important; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--yellow); z-index: 2; pointer-events: none; }
.ba-handle::after { content: "\2194"; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font: 700 20px/1 var(--body); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ba-tag { position: absolute; top: 12px; z-index: 2; background: rgba(20,19,17,.8); color: var(--on-dark); font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; pointer-events: none; }
.ba-tag.l { left: 12px; } .ba-tag.r { right: 12px; }
.ba input:focus-visible + .ba-handle::after { outline: 3px solid var(--on-dark); outline-offset: 2px; }
@media (max-width: 860px) { .clean-row { grid-template-columns: 1fr 1fr; } .ba { grid-column: 1 / -1; } }
@media (max-width: 520px) { .clean-row { grid-template-columns: 1fr; } }
main .ba img:not([src$=".svg"]):not(.bg):not(.hero-img) { filter: saturate(.95) contrast(1.04) !important; }

/* Waste tab photo strip */
.clean-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.clean-row.two figure img, .clean-row.two video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.clean-row.two video { filter: grayscale(1) sepia(.6) saturate(1.5) hue-rotate(-8deg) brightness(.82) contrast(1.08); transition: filter .5s ease; }
.clean-row.two figure:hover video { filter: none; }
@media (max-width: 560px) { .clean-row.two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tabs .wrap { gap: 0; scrollbar-width: none; } .tabs .wrap::-webkit-scrollbar { display: none; } .tabs .tab { padding-inline: 12px; font-size: 15px; white-space: nowrap; } }
.clean-row.trio { margin-top: 0; }
.clean-row.trio figure img, .clean-row.trio video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.clean-row.trio video { filter: grayscale(1) sepia(.6) saturate(1.5) hue-rotate(-8deg) brightness(.82) contrast(1.08); transition: filter .5s ease; }
.clean-row.trio figure:hover video { filter: none; }

/* Equipment hire tab */
.svc-grid.hire { grid-template-columns: repeat(5, 1fr); }
.svc-grid.hire .svc h3 { font-size: 21px; }
.svc-grid.hire + .rate-note { margin-top: 18px; }
.narrow-steps { max-width: 820px; }
.narrow-steps .rate-note { margin-top: 22px; }
.narrow-steps .btns { margin-top: 18px; }
@media (max-width: 1000px) { .svc-grid.hire { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .svc-grid.hire { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .svc-grid.hire { grid-template-columns: 1fr; } }
.cur-sub { font: 700 22px/1.1 "Saira Condensed", Arial Narrow, sans-serif; text-transform: uppercase; letter-spacing: .04em; margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; }
.cur-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-head + .cur-sub { margin-top: 8px; }
footer .credit { padding-block: 0 22px; font-size: 12.5px; letter-spacing: .04em; color: rgba(243,241,236,.45); text-align: center; }

/* =========================================================
   FIRST IMPRESSION, SCROLL AND HOVER
   ========================================================= */
/* browser surfaces in the palette */
::selection { background: var(--yellow); color: var(--ink); }
html { accent-color: var(--yellow-deep); }
input, textarea { caret-color: var(--yellow-deep); }
a { text-underline-offset: .18em; }
.fig b { font-variant-numeric: tabular-nums; }

/* hero drifts and fades as you scroll into the page */
.hero .wrap { opacity: calc(1 - var(--hp, 0) * 1.4); translate: 0 calc(var(--hp, 0) * 70px); }
.hero-img { translate: 0 calc(var(--hp, 0) * 90px); }

/* buttons lift, arrows lead */
.btn { transition: background .15s, color .15s, border-color .15s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); }
.btn svg { transition: translate .3s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(30,28,25,.45); }
  .btn:hover svg { translate: 4px 0; }
  .btn:active { transform: translateY(0); box-shadow: 0 2px 6px -2px rgba(30,28,25,.4); transition-duration: .08s; }
}

/* service tiles: a yellow rule draws in along the base */
a.svc { position: relative; }
a.svc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow-deep);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.16,1,.3,1); }
a.svc:hover::after, a.svc:focus-visible::after { transform: scaleX(1); }
a.svc h3 { transition: color .2s; }

/* explore cards lift off the page */
.go { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1); }
.go img { transition: filter .5s ease, transform .9s cubic-bezier(.16,1,.3,1) !important; }
@media (hover: hover) {
  .go:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(0,0,0,.7); }
  .go:hover img, .reveal-on .go.reveal:hover img { transform: scale(1.06); }
}

/* home services: swipe sideways on phones instead of a tall stack */
@media (max-width: 580px) {
  .svc-grid.swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; background: none; border: 0;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 14px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .svc-grid.swipe::-webkit-scrollbar { display: none; }
  .svc-grid.swipe .svc { flex: 0 0 82%; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 16px; }
}

/* cookie choice: a compact bar that waits until the visitor starts reading */
.cookie { gap: 12px; padding: 14px 16px; }
.cookie p { font-size: 14.5px; }
.cookie .btn { padding: 9px 16px; font-size: 14.5px; }
@media (max-width: 560px) {
  .cookie { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    grid-template-columns: 1fr auto; align-items: center; border-radius: 14px; }
  .cookie-btns { gap: 8px; }
  .cookie .btn { padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .wrap, .hero-img { translate: none; opacity: 1; }
  .btn:hover, .go:hover { transform: none; }
}

/* =========================================================
   NEWSROOM (built from Instagram, see scripts/instagram_sync.py)
   ========================================================= */
.sec-head.row { display: flex; align-items: end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.sec-head.row > div { display: grid; gap: 12px; }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.news-card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .3s; }
.news-card[hidden] { display: none; }
.alt .news-card { border-color: transparent; }
.nc-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mist); }
.nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.nc-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px;
  border-radius: 999px; background: rgba(20,19,17,.72); color: var(--on-dark); font: 600 13px/1 var(--body);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nc-badge svg { width: 15px; height: 15px; }
.nc-body { display: grid; gap: 10px; align-content: start; padding: 18px 20px 22px; border-top: 3px solid var(--yellow); }
.nc-body time, .news-lead time, .story-head time { font: 600 14px/1 var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.nc-body h3 { font-size: 23px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nc-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 15px/1 var(--body); color: var(--ink); }
.nc-more svg { width: 18px; height: 18px; transition: translate .3s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) {
  .news-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -22px rgba(30,28,25,.5); }
  .news-card:hover .nc-img img, .news-lead:hover .nc-img img { transform: scale(1.05); }
  .news-card:hover .nc-more svg, .news-lead:hover .nc-more svg { translate: 4px 0; }
}
.news-card:focus-visible, .news-lead:focus-visible { outline-offset: 4px; }

/* lead story: the newest post, wide */
.news-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-bottom: 30px; text-decoration: none; color: var(--on-dark);
  background: var(--ink); border-radius: 22px; overflow: hidden; }
.news-lead .nc-img { aspect-ratio: auto; min-height: 420px; }
.news-lead .nc-img img { position: absolute; inset: 0; }
.nl-body { display: grid; gap: 16px; align-content: center; padding: clamp(26px, 4vw, 52px); }
.nl-body time { color: var(--on-dark-muted); }
.nl-body h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; }
.nl-body p { color: #D2CCC1; font-size: 17px; max-width: 52ch; }
.nl-body .nc-more { color: var(--yellow); }

.news-more { justify-content: center; margin-top: 30px; }
.news-follow { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; color: var(--muted); text-align: center; }
.news-follow .btn svg, .story .btn svg { width: 20px; height: 20px; }
.news-empty { max-width: 640px; margin-inline: auto; text-align: center; display: grid; gap: 16px; justify-items: center; padding-block: 20px; }
.news-empty p { color: var(--muted); font-size: 18px; }

/* one story */
.story .wrap { padding-top: calc(clamp(40px, 6vw, 70px) + 90px); padding-bottom: clamp(48px, 7vw, 90px); }
.crumbs { display: flex; gap: 10px; font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--ink); }
.story-head { display: grid; gap: 14px; margin-bottom: 34px; }
.story-head h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1; max-width: 22ch; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.story-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.story-media figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: var(--mist); }
.story-media figure:first-child { grid-column: 1 / -1; }
.story-media img { width: 100%; height: 100%; object-fit: cover; filter: none !important; }
.story-media figure:not(:first-child) img { aspect-ratio: 1 / 1; }
.story-play { position: absolute; inset: auto 14px 14px auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 999px; background: var(--yellow); color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none; }
.story-play svg { width: 18px; height: 18px; }
.story-text { display: grid; gap: 16px; font-size: 18px; line-height: 1.65; position: sticky; top: 110px; }
.story-text p { max-width: 62ch; }
.story-text a:not(.btn) { color: var(--ink); text-decoration-color: var(--yellow-deep); text-decoration-thickness: 2px; }
.story-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.story-tags li { font-size: 14px; line-height: 1; padding: 7px 10px; border-radius: 999px; background: var(--mist); color: #3f3b35; }
.story-text .btns { margin-top: 8px; }

@media (max-width: 960px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-grid { grid-template-columns: 1fr; }
  .story-text { position: static; }
}
@media (max-width: 760px) {
  .news-lead { grid-template-columns: 1fr; }
  .news-lead .nc-img { min-height: 0; aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
  .latest-news .news-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 14px; scroll-padding-inline: var(--gutter); }
  .latest-news .news-grid::-webkit-scrollbar { display: none; }
  .latest-news .news-card { flex: 0 0 80%; scroll-snap-align: start; }
  .story-media { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .news-card:hover { transform: none; } }

/* ---------- customer feedback form ---------- */
.fb { max-width: 860px; }
.fb .en, .fb-card .en { display: block; color: var(--muted); font-size: 14.5px; font-weight: 400; }
.fb-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--yellow); padding: clamp(20px, 4vw, 40px); margin-top: 28px; display: grid; gap: 30px; }
.fb-q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.fb-q > legend, .fb-q > label { padding: 0; margin-bottom: 10px; font: 700 21px/1.15 var(--display); letter-spacing: .01em; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.fb-q > legend b, .fb-q > label b { grid-row: span 2; display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--yellow); font: 700 16px/1 var(--body); }
.fb-q .en { font-family: var(--body); }
.fb-card input[type=text], .fb-card input[type=password], .fb-card textarea, .fb-card select {
  width: 100%; font: 400 17px/1.4 var(--body); color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: 2px; padding: 13px 14px; }
.fb-card textarea { resize: vertical; min-height: 130px; }
.fb-card input:focus, .fb-card textarea:focus, .fb-card select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .fb-row { grid-template-columns: 1fr; gap: 30px; } }
.hint { margin: 0; font-size: 15px; color: var(--muted); }
.hint .en { display: inline; font-size: 15px; }
.rate { display: flex; gap: 8px; flex-wrap: wrap; }
.star { position: relative; cursor: pointer; width: 58px; height: 58px; display: grid; place-items: center; border: 2px solid var(--line); background: var(--mist); transition: background .12s, border-color .12s; }
.star input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.star svg { width: 32px; height: 32px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; }
.star:hover { border-color: var(--ink); }
.star.on { background: var(--yellow); border-color: var(--ink); }
.star.on svg { fill: var(--ink); stroke: var(--ink); }
.star:has(input:focus-visible) { outline: 3px solid var(--yellow-deep); outline-offset: 3px; }
.rate-word { margin: 0; min-height: 1.4em; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices label { flex: 1 1 180px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; padding: 12px 14px; border: 2px solid var(--line); cursor: pointer; font-weight: 600; line-height: 1.3; }
.choices label .en { grid-column: 2; font-size: 14px; }
.choices input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--ink); grid-row: span 2; }
.choices label:has(input:checked) { border-color: var(--ink); background: #FFF8E3; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; background: var(--mist); border-left: 4px solid var(--yellow); cursor: pointer; font-weight: 600; line-height: 1.4; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.consent .en { margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-error { margin: 0; padding: 12px 14px; background: #FDECEA; border-left: 4px solid #B42318; color: #7A1A12; font-weight: 600; }
.fb-error:empty { display: none; }
.fb-card .btn { justify-self: start; border: 0; cursor: pointer; }
.fb-card .btn:disabled { opacity: .6; cursor: progress; }
.fb-done { margin-top: 28px; background: var(--paper); border-top: 4px solid var(--yellow); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; }
.fb-done:focus { outline: none; }
.fb-done h2 { font-size: clamp(32px, 4vw, 44px); }
.fb-done p { margin: 0; font-size: 18px; }

/* ---------- testimonials (home) ---------- */
.testi-head { grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px; }
.testi-head > div { display: grid; gap: 12px; }
@media (max-width: 700px) { .testi-head { grid-template-columns: 1fr; } .testi-head .btn { justify-self: start; } }
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
.testi { margin: 0; background: var(--paper); border-top: 4px solid var(--yellow); padding: 24px 24px 22px; display: grid; gap: 14px; align-content: start; }
.testi-stars, .ad-stars { color: var(--yellow-deep); font-size: 22px; letter-spacing: 3px; line-height: 1; }
.testi-stars i, .ad-stars i { font-style: normal; color: var(--line); }
.testi blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.testi blockquote::before { content: "\201C"; } .testi blockquote::after { content: "\201D"; }
.testi figcaption { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; }
.testi figcaption b { font: 700 20px/1.1 var(--display); letter-spacing: .02em; }
.testi figcaption span { font-size: 14px; color: var(--muted); }

/* ---------- feedback review (staff) ---------- */
.ad { max-width: 980px; }
.ad-login { max-width: 420px; gap: 14px; }
.ad-login label { font-weight: 700; }
.ad-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.ad-head h1 { margin: 8px 0 12px; }
.ad-head .btn, .ad-item .btn { border-width: 2px; cursor: pointer; padding: 11px 16px; font-size: 15px; }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.ad-tabs button { font: 600 15px/1 var(--body); padding: 11px 16px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; }
.ad-tabs button span { display: inline-block; min-width: 22px; margin-left: 6px; padding: 3px 6px; background: var(--mist); font-size: 13px; }
.ad-tabs button[aria-pressed=true] { background: var(--ink); color: var(--on-dark); }
.ad-tabs button[aria-pressed=true] span { background: var(--yellow); color: var(--ink); }
.ad-msg { min-height: 1.4em; color: var(--muted); }
.ad-list { display: grid; gap: 14px; }
.ad-item { background: var(--paper); border-left: 4px solid var(--line); padding: 20px 22px; display: grid; gap: 8px; }
.ad-item.st-pending { border-left-color: var(--yellow); }
.ad-item.st-approved { border-left-color: #15803D; }
.ad-item.st-hidden { opacity: .75; }
.ad-top { display: flex; justify-content: space-between; align-items: center; }
.ad-status { font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ad-item p { margin: 0; }
.ad-text { font-size: 18px; white-space: pre-line; }
.ad-who small, .ad-meta { color: var(--muted); font-size: 14.5px; }
.ad-ok { color: #15803D; font-weight: 600; font-size: 14.5px; }
.ad-no { color: #B42318; font-weight: 600; font-size: 14.5px; }
.ad-item .btns { margin-top: 6px; gap: 8px; }
.ad-item .ad-del { margin-left: auto; border-color: var(--line); color: var(--muted); }
.ad-empty { color: var(--muted); padding: 24px 0; }
.fb-done[hidden], .fb-card[hidden] { display: none; }
.fb-q { align-content: start; }
.fb-row { align-items: start; }
.testi blockquote, .ad-text { overflow-wrap: anywhere; }

/* ---------- waste collection survey (feedback form) ---------- */
.fb-survey[hidden] { display: none; }
.fb-survey { background: var(--mist); padding: 18px; gap: 18px; }
.fb-survey > legend { float: left; width: 100%; }
.sv-row { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sv-q { margin: 0; font-weight: 700; line-height: 1.3; }
.sv-q .en { font-weight: 400; }
.sv-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sv-opts label { position: relative; cursor: pointer; }
.sv-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-opts label > span { display: grid; gap: 2px; height: 100%; padding: 10px 8px; background: var(--paper); border: 2px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; }
.sv-opts label > span .en { font-size: 12.5px; }
.sv-opts label:hover > span { border-color: var(--ink); }
.sv-opts input:checked + span { background: var(--yellow); border-color: var(--ink); }
.sv-opts input:checked + span .en { color: var(--ink); }
.sv-opts input:focus-visible + span { outline: 3px solid var(--yellow-deep); outline-offset: 2px; }
@media (max-width: 700px) {
  .sv-opts { grid-template-columns: 1fr; }
  .sv-opts label > span { grid-template-columns: 1fr auto; text-align: left; align-items: baseline; }
}
.ad-sv { list-style: none; margin: 4px 0; padding: 10px 12px; background: var(--mist); display: grid; gap: 4px; font-size: 14.5px; }
.ad-sv li { display: flex; justify-content: space-between; gap: 12px; }
.ad-sum { background: var(--paper); padding: 20px 22px; margin: 14px 0; }
.ad-sum h2 { font-size: 26px; margin-bottom: 14px; }
.ad-sum h2 small { display: block; font: 400 14.5px/1.4 var(--body); color: var(--muted); margin-top: 4px; }
.ad-sum dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
@media (max-width: 700px) { .ad-sum dl { grid-template-columns: 1fr; } }
.ad-sum dt { font-size: 14.5px; color: var(--muted); }
.ad-sum dd { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; }
.ad-sum dd b { font: 700 24px/1 var(--display); min-width: 34px; }
.ad-sum .bar { flex: 1; height: 8px; background: var(--mist); }
.ad-sum .bar i { display: block; height: 100%; background: var(--yellow-deep); }
.sv-opts.sv-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; }
.sv-opts.sv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
@media (max-width: 700px) { .sv-opts.sv-2, .sv-opts.sv-3 { grid-template-columns: 1fr; max-width: none; } }
.sv-more[hidden] { display: none; }
.sv-more { display: grid; gap: 6px; margin-top: 6px; }
.sv-more label { font-weight: 600; font-size: 15px; }
.sv-more label .en { display: inline; font-weight: 400; }
label.sv-q { display: block; }
.fb-survey textarea { min-height: 90px; }
.ad-sv li.long { display: grid; gap: 2px; }
.ad-sv li.long b { font-weight: 400; overflow-wrap: anywhere; white-space: pre-line; }
.ad-pct { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ad-pct span { display: block; font-size: 14.5px; color: var(--muted); }
.ad-pct b { font: 700 24px/1.2 var(--display); }
.ad-pct small { font: 400 14px var(--body); color: var(--muted); }
@media (max-width: 700px) { .ad-pct { grid-template-columns: 1fr; } }