/* Wing Hing — UI v1.16 (from v1.15; footer blocks vertically centred)
   Breakpoints: desktop >= 1024 px · tablet 768–1023 px · phone < 768 px
   Content width 1200 · side padding 48 / 32 / 20 · section padding 56 / 40 / 32
   Type: h1 48/36 (32 < 360) · h2 34/28 · service headings 32/28/28 · service items 22/21 · supporting items 18 · body 18/1.6 (17 on phones) · supporting text 16/1.5
   Colour: ink #14100D · brand red #942B25 · paper #F5F3F0 · line #E3DFDA · muted #5C5650 */
:root{
  --ink:#14100D;--red:#942B25;--red-dark:#7A221D;--muted:#5C5650;--line:#E3DFDA;--paper:#F5F3F0;--white:#fff;
  --font:'IBM Plex Sans','Noto Sans HK','Noto Sans CJK HK','PingFang HK','PingFang TC','Microsoft JhengHei',Arial,sans-serif;
  --font-zh:'Noto Sans HK','Noto Sans CJK HK','IBM Plex Sans','PingFang HK','PingFang TC','Microsoft JhengHei',sans-serif;
  --wrap:1200px;--gutter:48px;--header:80px;
  --pad:56px;--hero-top:48px;--head-gap:28px;
  --h1:48px;--h2:34px;--h-group:32px;--h-svc:22px;--h-sup:18px;--h-proj:24px;--h-sub:20px;
  --body:18px;--small:16px;--meta:15px;
  --t:240ms;
}
@media (max-width:1023px){
  :root{--gutter:32px;--pad:40px;--hero-top:40px;--h1:36px;--h2:28px;--h-group:28px;--h-svc:21px;--h-proj:22px}
}
@media (max-width:767px){
  :root{--gutter:20px;--header:64px;--pad:32px;--hero-top:32px;--body:17px}
}
@media (max-width:359px){
  :root{--h1:32px}
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh,var(--header)) + 16px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
html[lang="zh-HK"] body{font-family:var(--font-zh);line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.005em;overflow-wrap:anywhere}
html[lang="zh-HK"] :is(h1,h2,h3,h4){line-height:1.35;letter-spacing:.02em}
p,address{margin:0}
p{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
main :where(div,figure,article,li,section){min-width:0}
.wrap{width:min(var(--wrap),calc(100% - 2*var(--gutter)));margin-inline:auto}
.wrap>:first-child{margin-top:0}
.wrap>:last-child{margin-bottom:0}
.skip{position:fixed;left:16px;top:-100px;background:var(--white);padding:12px 16px;z-index:50;font-size:var(--small)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;padding:0 24px;font-size:16px;font-weight:600;line-height:1.3;text-align:center;text-decoration:none;border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{background:var(--red-dark)}
.btn-secondary{border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--white)}

/* Header */
.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
/* The header does not wrap at normal text size; with enlarged text it may wrap rather than clip, and anchor offsets follow its measured height (--hh, set in site.js). */
.header-inner{min-height:var(--header);width:min(var(--wrap),calc(100% - 2*var(--gutter)));margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.brand{display:flex;align-items:center;min-height:44px;flex:none;line-height:0}
.logo{width:auto}
.logo-full{height:48px}
.logo-compact,.logo-mark{display:none}
#navigation{display:flex;gap:8px;margin-left:auto}
#navigation a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:16px;font-weight:500}
#navigation a:hover{color:var(--red)}
.header-actions{display:flex;align-items:center;gap:8px}
.lang-switch{display:flex;border:1px solid var(--line)}
.lang-btn{min-height:44px;min-width:48px;padding:0 12px;background:none;border:0;font-size:16px;font-weight:500;color:var(--muted);cursor:pointer}
.lang-btn+.lang-btn{border-left:1px solid var(--line)}
.lang-btn[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.lang-btn:not([aria-pressed="true"]):hover{color:var(--ink)}
.menu{display:none;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;background:var(--ink);color:var(--white);border:0;cursor:pointer}
.bars{display:block;width:18px;height:2px;background:currentColor;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.bars::before{top:-6px}.bars::after{top:6px}
@media (max-width:1023px){
  .menu{display:inline-flex}
  .header-actions{margin-left:auto}
  #navigation{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px}
  #navigation.open{display:flex}
  #navigation a{min-height:48px;border-bottom:1px solid var(--line)}
}
@media (max-width:767px){ .logo-full{height:40px} }
@media (max-width:480px){
  .header-inner{column-gap:12px}
  .logo-full{display:none}
  .logo-compact{display:block;height:32px}
  .lang-btn{min-width:44px;padding:0 8px}
}
@media (max-width:400px){
  .logo-compact{display:none}
  .logo-mark{display:block;height:32px}
}

/* Sections: one padding scale; a section following one with the same background takes no top padding */
.section{padding:var(--pad) 0}
.services{padding-top:0}
.projects{background:var(--paper)}
.section-head{max-width:720px;margin-bottom:var(--head-gap)}
.section-head h2,.about h2,.contact h2{font-size:var(--h2)}
.section-head p{margin-top:16px;color:var(--muted);max-width:36em}

/* Opening: heading left, paragraph and buttons right (desktop); stacked below 1024 px */
.hero{padding:var(--hero-top) 0 var(--pad)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
.hero-body{padding-top:40px}
.eyebrow{font-size:var(--meta);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
html[lang="zh-HK"] .eyebrow{letter-spacing:.06em}
.hero h1{font-size:var(--h1);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
html[lang="zh-HK"] .hero h1{line-height:1.35;letter-spacing:.02em}
.lead{max-width:34em;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.frame{overflow:hidden}
.frame img{transform:scale(1.04)}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:1fr}
  .hero-body{padding-top:24px}
}
@media (max-width:400px){ .actions .btn{flex:1 1 100%} }

/* Services (v1.11): two illustrated areas; one detail panel open at a time.
   Intro spacing: number→heading 12 · heading→rule 24 · rule→artwork 28 · artwork→paragraph 24 · paragraph→Explore 16 */
.services .section-head{margin-bottom:var(--head-gap)}
.svc-areas{container-type:inline-size;--cols:1;--col-gap:0px;overflow-anchor:none} /* the script keeps the activated control in place; native anchoring would double the correction */
.svc-intro{min-width:0}
.svc-num{font-size:var(--meta);font-weight:600;line-height:1.4;color:var(--red);letter-spacing:.04em}
.group-title{margin-top:12px;font-size:var(--h-group);font-weight:600;line-height:1.25;letter-spacing:-.01em}
html[lang="zh-HK"] .group-title{line-height:1.35;letter-spacing:.02em}
.svc-rule{margin-top:24px;height:2px;background:var(--red)}
.svc-art{margin-top:28px;height:calc((100cqw - (var(--cols) - 1) * var(--col-gap)) / var(--cols) * .8);border:2px solid transparent;background:transparent} /* border space reserved so selection does not shift layout */
.svc-art.is-selected{background:#F4F2EF}
/* Selected-service animation (v1.15, enlarged): welding light, sparks and fume (industrial);
   monitor light, charger pulse and cooling-tower vapour (building).
   Plays only while that service is selected; none under reduced motion. Large areas change gradually; only small points flicker. */
.svc-art .fx{display:none;pointer-events:none}
.svc-art.is-selected .fx{display:inline}
.fx .weld-light{mix-blend-mode:screen;animation:fx-light 1.8s ease-in-out infinite}
@keyframes fx-light{0%,100%{opacity:.7}30%{opacity:1}55%{opacity:.75}80%{opacity:1}}
.fx .weld-glow{animation:fx-flicker .9s steps(1,end) infinite}
.fx .weld-core{animation:fx-flicker .9s steps(1,end) infinite}
@keyframes fx-flicker{0%{opacity:.65}11%{opacity:1}23%{opacity:.75}36%{opacity:.95}48%{opacity:.7}62%{opacity:1}77%{opacity:.8}89%{opacity:.95}}
.fx .spark{stroke:#FFD27A;stroke-width:3;stroke-linecap:round;opacity:0;animation:fx-spark var(--d) cubic-bezier(.3,.1,.7,1) var(--delay) infinite}
@keyframes fx-spark{0%{transform:translate(0,0);opacity:0}6%{opacity:1}45%{transform:translate(var(--mx),var(--my));opacity:.95}85%{opacity:.6}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.fx .smoke{fill:url(#fx-smoke);opacity:0;transform-box:fill-box;transform-origin:center;animation:fx-smoke 4.8s ease-out var(--delay) infinite}
@keyframes fx-smoke{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.8}100%{transform:translate(var(--sx),var(--sy)) scale(2.6);opacity:0}}
.fx .spill{animation:fx-tint 3.2s ease-in-out infinite;opacity:.6}
.fx .scr-tint{opacity:0;animation:fx-tint 3.2s ease-in-out infinite}
.fx .scr-tint-r{animation-delay:-1.6s}
@keyframes fx-tint{0%,100%{opacity:.3}50%{opacity:.65}}
.fx .scan{opacity:.9;animation:fx-scan 2.6s linear infinite}
.fx .scan-r{animation-delay:-1.3s}
@keyframes fx-scan{from{transform:translateY(0)}to{transform:translateY(70px)}}
.fx .led,.fx .led-glow,.fx .led-halo{animation:fx-led 1.6s ease-in-out infinite}
.fx .led-halo{mix-blend-mode:screen}
@keyframes fx-led{0%,100%{opacity:.6}50%{opacity:1}}
.fx .ripple{fill:none;stroke:#3BD16A;stroke-width:3.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:fx-ripple 2.4s ease-out infinite}
.fx .ripple-2{animation-delay:-1.2s}
@keyframes fx-ripple{0%{transform:scale(1);opacity:1}100%{transform:scale(7);opacity:0}}
.fx .vapour{fill:url(#fx-vapour);opacity:0;transform-box:fill-box;transform-origin:center;animation:fx-vapour 6s ease-out var(--delay) infinite}
@keyframes fx-vapour{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:.9}100%{transform:translate(var(--vx),var(--vy)) scale(2.2);opacity:0}}
.svc-art:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.svc-art .art-svg{display:block;width:100%;height:100%} /* inline SVG crop of the Wix-hosted artwork; preserveAspectRatio meet = contain */
.group-intro{margin-top:24px;max-width:40em}
.svc-explore{margin-top:16px}
.explore,.panel-close{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 18px;background:var(--white);border:1px solid var(--red);color:var(--red);font-size:var(--small);font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.explore:hover,.panel-close:hover{background:#F4F2EF}
.explore[aria-expanded="true"]{background:var(--red);color:var(--white)}
.explore[aria-expanded="true"]:hover{background:var(--red-dark);border-color:var(--red-dark)}
.explore:focus-visible,.panel-close:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.explore-sign{font-weight:500}
.js-svc .svc-art{cursor:pointer}
/* Details panel */
.svc-panel{background:var(--paper);border-top:2px solid var(--red);padding:32px}
.svc-panel:not([hidden]){animation:panel-in 200ms ease}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-title{font-size:26px;font-weight:600;line-height:1.3;margin-bottom:24px}
html[lang="zh-HK"] .panel-title{line-height:1.35}
.svc-list,.svc-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.svc-list h4{font-size:var(--h-svc);font-weight:600;line-height:1.3}
.svc-support h4{font-size:var(--h-sup);font-weight:600;line-height:1.35}
html[lang="zh-HK"] :is(.svc-list,.svc-support) h4{line-height:1.35}
.svc-list h4+p,.svc-support h4+p{margin-top:10px;color:var(--muted)}
/* Supporting delivery and commercial information: grouped below one fine divider */
.svc-support{margin-top:32px;border-top:1px solid var(--line);padding-top:28px}
.related{margin-top:12px}
.related-label,.scope-label{font-size:var(--small);font-weight:600;line-height:1.5;color:var(--ink)}
.related-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:4px}
.related-links a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--small);line-height:1.5;text-decoration:underline;text-underline-offset:4px}
.related-links a:hover{color:var(--red)}
.panel-foot{margin-top:24px}
/* Desktop and tablet: two equal columns; rows shared so rules and artwork align; one full-width panel below */
@media (min-width:768px){
  .svc-areas{--cols:2;--col-gap:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto) auto auto;column-gap:var(--col-gap)}
  .svc-intro{grid-row:1 / span 5;display:grid;grid-template-rows:subgrid}
  #group-a{grid-column:1}
  #group-b{grid-column:2}
  .svc-panel{grid-column:1 / -1;grid-row:6;margin-top:40px}
}
/* Without JavaScript both panels show, one after the other */
@media (min-width:768px){ #panel-b{grid-row:7} }
@media (min-width:768px) and (max-width:1023px){
  .svc-areas{--col-gap:32px}
  .svc-panel{padding:24px}
}
/* Phone: areas stacked; a panel opens directly below its Explore control */
@media (max-width:767px){
  #group-b{margin-top:40px}
  .svc-panel{margin-top:16px;padding:20px}
  .svc-list,.svc-support{grid-template-columns:1fr}
  .panel-title{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .svc-panel:not([hidden]){animation:none}
  .svc-art .fx{display:none!important}
}

/* Projects */
.project-feature{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:var(--white);display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:24px;display:flex;flex-direction:column}
.card h3{font-size:var(--h-proj)}
.tag{margin-top:4px;font-size:var(--meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
html[lang="zh-HK"] .tag{letter-spacing:.04em}
.card .scope-label{margin-top:16px}
.scope{color:var(--muted)}
.ref-list{margin-top:24px;background:var(--white);border-top:2px solid var(--ink)}
.ref-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px 32px;padding:24px;border-bottom:1px solid var(--line);align-items:start}
.ref-list h3{font-size:var(--h-sub)}
.card:target,.ref-list li:target{outline:2px solid var(--red);outline-offset:-2px}
.cta-row{margin-top:24px}
@media (min-width:768px) and (max-width:1023px){
  .project-feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-feature .card:last-child{grid-column:1 / -1}
  .project-feature .card:last-child img{aspect-ratio:21/9}
}
@media (max-width:767px){
  .project-feature{grid-template-columns:1fr;gap:16px}
  .card-body{padding:20px}
  .ref-list li{grid-template-columns:1fr;padding:20px}
}

/* How we deliver: four steps, two per row on desktop */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.steps li{border-top:2px solid var(--ink);padding-top:20px}
.steps h3{font-size:var(--h-svc);line-height:1.35}
.steps .num{color:var(--red)}
.steps p{margin-top:10px;color:var(--muted);max-width:36em}
@media (max-width:1023px){ .steps{grid-template-columns:1fr;gap:32px} }

/* About: compact, white, fine top rule */
.section.about{padding:32px 0;background:var(--white);border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:48px;align-items:baseline}
.about h2{font-size:28px}
.about-copy p{max-width:40em;color:var(--ink)}

/* Contact: compact, pale grey */
.section.contact{padding:28px 0;background:var(--paper);color:var(--ink)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:center}
.contact h2{font-size:28px}
.contact-head p{margin-top:8px;color:var(--muted);max-width:34em}
.contact-details{display:flex;flex-wrap:wrap;gap:8px 48px}
.contact-row{display:flex;flex-direction:column;justify-content:center;min-height:56px;text-decoration:none}
.contact-row .k{font-size:var(--meta);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5}
html[lang="zh-HK"] .contact-row .k{letter-spacing:.04em}
.contact-row .v{font-size:var(--body);font-style:normal;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
a.contact-row .v{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
a.contact-row:hover .v{color:var(--red);text-decoration-color:currentColor}
@media (max-width:767px){
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:12px}
  .contact-details{flex-direction:column;gap:4px}
}

/* Footer */
.footer{border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 32px;padding:20px 0;font-size:15px;line-height:1.5;color:var(--muted)}
.foot-address{font-style:normal}
.footer a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:768px){ .footer-inner{align-items:center} } /* each block centred on the tallest (the address) */
@media (max-width:767px){ .footer-inner{flex-direction:column;gap:8px} }

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
/* UI v1.18 (12 Oct 2026): commercial-building panel lead and second paragraphs */
.panel-lead{margin:0 0 28px;color:var(--muted);max-width:70ch}
.svc-list li p+p{margin-top:10px;color:var(--muted)}
/* UI v1.19 (12 Oct 2026): keep terms in the hero introduction on one line; text size unchanged */
.nb{white-space:nowrap}