:root{
  --paper:#F7F6F1;
  --paper-deep:#EFEDE5;
  --ink:#191C1E;
  --ink-soft:#4B5054;
  --rule:#D6D3C8;
  --rule-soft:#E4E1D7;
  --sun-gold:#E5C500;
  --sun-orange:#FF7300;
  --accent:#A55603;
  --sun-grad:linear-gradient(180deg,#E5C500,#FF7300);
  --sun-grad-text:linear-gradient(180deg,#DCAF00,#C85A00);
  --disp:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--sun-orange);color:var(--ink)}

/* ---------- utilities ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--sun-grad);flex:none}
.hero .eyebrow{font-size:15.5px;color:var(--ink);letter-spacing:.12em}
.hero .eyebrow::before{width:11px;height:11px}
.mono{font-family:var(--mono)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- header ---------- */
header{
  border-bottom:1px solid var(--rule);
  background:rgba(247,246,241,.92);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:50;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 24px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:76px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;row-gap:6px}
.nav-links a{
  font-family:var(--mono);font-size:14.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  position:relative;padding:4px 0;
}
.nav-links a:not(.nav-tel)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--sun-orange);transition:width .25s ease;
}
.nav-links a:not(.nav-tel):hover::after,.nav-links a:not(.nav-tel):focus-visible::after{width:100%}
.nav-links a:hover{color:var(--accent)}
.nav-links a.nav-tel{
  font-size:14.5px;font-weight:600;
  background:var(--sun-grad);color:var(--ink);padding:4px 5px;letter-spacing:.06em;
  transition:background .2s,color .2s;white-space:nowrap;
}
.nav-links a.nav-tel:hover,.nav-links a.nav-tel:focus-visible{background:var(--ink);color:var(--paper)}
a:focus-visible,button:focus-visible{outline:2px solid var(--sun-orange);outline-offset:3px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--rule);
  background-image:
    linear-gradient(var(--rule-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:84px 24px 72px;
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
}
.hero h1{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(46px,6.6vw,88px);line-height:.94;letter-spacing:.01em;
  margin:22px 0 24px;
}
.hero h1 em{font-style:normal;color:var(--accent);background:var(--sun-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lede{max-width:52ch;color:var(--ink-soft);font-size:17.5px}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;padding:15px 24px;
  border:1px solid var(--ink);transition:transform .15s ease,background .2s,color .2s,border-color .2s;
  display:inline-block;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--sun-orange);border-color:var(--sun-orange);color:var(--ink)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.hero-regions{
  margin-top:38px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}
.hero-regions b{color:var(--accent);font-weight:600;margin:0 6px}

/* drawing frame device */
.sheet{
  background:#fff;border:1px solid var(--ink);position:relative;
  box-shadow:10px 10px 0 rgba(25,28,30,.07);
}
.sheet-cap{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  border-top:1px solid var(--ink);padding:9px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
}
.sheet-cap b{color:var(--accent);font-weight:600}
.sheet .art{padding:18px}

/* ---------- status band ---------- */
.band{
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
}
.band .wrap{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding-top:13px;padding-bottom:13px;text-align:center;flex-wrap:wrap;
}
.dot{width:10px;height:10px;border-radius:50%;background:var(--sun-grad);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- sections ---------- */
section{padding:96px 0;scroll-margin-top:124px}
.sec-head{margin-bottom:52px}
h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(36px,4.6vw,58px);line-height:1;letter-spacing:.01em;margin-top:16px;
}
.sec-head p{max-width:62ch;color:var(--ink-soft);margin-top:18px;font-size:17px}

/* ---------- project sheet (signature) ---------- */
#project{background:var(--paper-deep);border-bottom:1px solid var(--rule)}
.projsheet{
  background:#fff;border:1.5px solid var(--ink);position:relative;padding:0;
}
.projsheet::before,.projsheet::after,
.projsheet .tick-b::before,.projsheet .tick-b::after{
  content:"";position:absolute;width:14px;height:14px;border:2px solid var(--sun-orange);
}
.projsheet::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.projsheet::after{top:-7px;right:-7px;border-left:0;border-bottom:0}
.projsheet .tick-b::before{bottom:-7px;left:-7px;border-right:0;border-top:0}
.projsheet .tick-b::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.proj-cell{padding:26px;border-top:1px solid var(--rule)}
.proj-cell.full{grid-column:1/-1;border-top:0}
.proj-cell + .proj-cell:not(.full){border-left:1px solid var(--rule)}
.proj-cell figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:14px;display:flex;justify-content:space-between;gap:10px;
}
.proj-cell figcaption b{color:var(--accent);font-weight:600}

/* project blocks */
.proj-head{display:grid;grid-template-columns:110px 1fr;gap:28px;margin-bottom:28px}
.proj-head .ref{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.1em;padding-top:9px}
.proj-title{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,42px);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin-bottom:10px}
.proj-head p{color:var(--ink-soft);max-width:72ch}
.locator{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.pend-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:80px;align-items:start}
.pend-grid .proj-head{grid-template-columns:1fr;gap:6px}
.pending .titleblock{grid-template-columns:repeat(3,1fr)}
.pending .tb:nth-child(n+4){border-top:1px solid var(--rule)}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.hl h4{font-family:var(--disp);font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.hl p{color:var(--ink-soft);font-size:15px}
.proj-cell.full + .proj-cell.full{border-top:1px solid var(--rule)}
.wm{position:relative}
.wm::after{content:"Sunway Developers · Concept Rendering";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-16deg);font-family:var(--mono);font-size:clamp(11px,1.5vw,15px);font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.30);text-shadow:0 1px 10px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none}
.projsheet.pending{border-style:dashed;background:#fff}
.pend-body{padding:58px 26px 50px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pend-label{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:600}
.pend-sub{color:var(--ink-soft);font-size:15px;max-width:46ch}

/* title block */
.titleblock{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1.5px solid var(--ink);
}
.tb{
  padding:14px 16px 16px;border-left:1px solid var(--rule);
}
.tb:first-child{border-left:0}
.tb small{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;
}
.tb span{
  font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.1;
}
.tb.hot span{color:var(--accent)}

/* ---------- services schedule ---------- */
#services .sched{border-top:1.5px solid var(--ink)}
.srow{
  display:grid;grid-template-columns:110px 1fr 1.6fr;gap:28px;
  padding:30px 0;border-bottom:1px solid var(--rule);align-items:baseline;
  transition:background .2s;
}
.srow:hover{background:rgba(245,130,0,.06)}
.srow .ref{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.1em}
.srow h3{
  font-family:var(--disp);font-weight:700;font-size:27px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.05;
}
.srow p{color:var(--ink-soft);font-size:15.5px;max-width:56ch}

/* ---------- standard ---------- */
#standard{background:var(--ink);color:var(--paper)}
#standard .eyebrow{color:#A6ABAF}
#standard h2{color:var(--paper)}
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#33383C;border:1px solid #33383C;margin-top:8px}
.std{background:var(--ink);padding:36px 30px 40px}
.std small{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sun-gold);display:block;margin-bottom:16px;font-weight:600;
}
.std h3{
  font-family:var(--disp);font-weight:700;font-size:26px;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:12px;line-height:1.1;
}
.std p{color:#B9BDC0;font-size:15px}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
.about-grid p{color:var(--ink-soft);font-size:17px;margin-top:18px;max-width:60ch}
.regions{border-top:1.5px solid var(--ink)}
.regions li{
  list-style:none;display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 2px;border-bottom:1px solid var(--rule);
  font-family:var(--disp);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.03em;
}
.regions li span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);font-weight:400}

/* ---------- contact ---------- */
#contact{background:var(--paper-deep);border-top:1px solid var(--rule)}
.con-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.con-item{border-top:1px solid var(--ink);padding:18px 0 22px}
.con-item small{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:6px;
}
.con-item a{text-decoration:none;font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,34px);text-transform:uppercase;letter-spacing:.02em;transition:color .2s}
.con-item a:hover{color:var(--accent)}
.con-item address{font-style:normal;font-size:16.5px;color:var(--ink-soft);line-height:1.55}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9DA2A6;border-top:4px solid;border-image:linear-gradient(90deg,var(--sun-gold),var(--sun-orange)) 1}
.foot{
  max-width:var(--maxw);margin:0 auto;padding:26px 24px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
}
.foot-logo{height:84px;width:auto}
.foot b{color:var(--paper);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:48px;padding-top:64px}
  .proj-grid{grid-template-columns:1fr}
  .proj-cell + .proj-cell:not(.full){border-left:0}
  .titleblock{grid-template-columns:repeat(3,1fr)}
  .tb{border-top:1px solid var(--rule)}
  .std-grid{grid-template-columns:1fr}
  .about-grid,.con-grid{grid-template-columns:1fr;gap:44px}
  .srow{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .proj-head{grid-template-columns:1fr;gap:8px}
  .hl-grid{grid-template-columns:1fr;gap:24px}
  .pend-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  section{padding:68px 0}
  .titleblock{grid-template-columns:repeat(2,1fr)}
  .nav{padding:8px 18px}
  .brand img{height:56px}
  .nav-links{gap:16px}
  .nav-links a:not(.nav-tel){font-size:13px}
}

/* ---------- contact form ---------- */
.cform{margin-top:30px;max-width:540px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea{width:100%;border:1px solid var(--ink);background:#fff;padding:12px 14px;font-family:var(--body);font-size:15.5px;color:var(--ink);border-radius:0}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--sun-orange);outline-offset:1px}
.cform .btn{border:1px solid var(--ink);cursor:pointer}
.fbanner{margin-top:26px;padding:14px 16px;font-size:15px;background:#fff;border:1px solid var(--ink)}
.fbanner.ok{border-left:5px solid var(--sun-orange)}
.fbanner.err{border-left:5px solid #B3261E}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}

/* ---------- legal pages ---------- */
.legal{max-width:800px;margin:0 auto;padding:72px 24px 96px}
.legal h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(38px,5vw,60px);line-height:.96;margin:16px 0 8px}
.legal-date{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:36px}
.legal h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:24px;margin:40px 0 12px;letter-spacing:.02em}
.legal p,.legal li{color:var(--ink-soft);font-size:16px}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--accent)}
.foot-links a{color:#9DA2A6;text-decoration:none}
.foot-links a:hover{color:var(--paper)}