/* ==========================================================================
   P K INFRAPROJECT — site styles
   Design language: engineering drawing sheet. Hairline rules, mono meta
   labels, condensed display type, square corners, one accent colour used
   sparingly. Custom rules only — everything else is Tailwind utilities.
   ========================================================================== */

:root{
  --ink:#12151A;
  --charcoal:#1B1F26;
  --steel:#4B5563;
  --concrete:#EDEBE6;
  --yellow:#FDB813;
  --deep:#F5A623;
  --accent:#E8542E;
  --rule:rgba(18,21,26,.14);
  --rule-dark:rgba(255,255,255,.14);

  /* shovel cursors, inlined so they never cost a request */
  --cur-dig:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNDIgMTYgMTYpIj48cGF0aCBkPSJNMTYgMi40IEMxOS40IDQuNiAyMi42IDcuMiAyMi42IDEwLjggTDIxLjQgMTYuMiBMMTAuNiAxNi4yIEw5LjQgMTAuOCBDOS40IDcuMiAxMi42IDQuNiAxNiAyLjQgWiIgZmlsbD0iI0Q3REJFMCIgc3Ryb2tlPSIjMEUxMTE2IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNiA0LjYgQzEzLjYgNi40IDExLjYgOC40IDExLjYgMTEgTDEyLjQgMTQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjJGNUY4IiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEzLjIgMTYuMiBoNS42IHYzLjIgaC01LjYgeiIgZmlsbD0iIzRBNTA1OCIgc3Ryb2tlPSIjMEUxMTE2IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxyZWN0IHg9IjE0LjMiIHk9IjE5IiB3aWR0aD0iMy40IiBoZWlnaHQ9IjcuNCIgZmlsbD0iIzk2NjgyRiIgc3Ryb2tlPSIjMEUxMTE2IiBzdHJva2Utd2lkdGg9IjEuNCIvPjxyZWN0IHg9IjEwLjQiIHk9IjI2IiB3aWR0aD0iMTEuMiIgaGVpZ2h0PSIzLjYiIHJ4PSIxLjgiIGZpbGw9IiMyQTJGMzYiIHN0cm9rZT0iIzBFMTExNiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L2c+PC9zdmc+") 6 6;
  --cur-dig-hot:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNDIgMTYgMTYpIj48cGF0aCBkPSJNMTYgMi40IEMxOS40IDQuNiAyMi42IDcuMiAyMi42IDEwLjggTDIxLjQgMTYuMiBMMTAuNiAxNi4yIEw5LjQgMTAuOCBDOS40IDcuMiAxMi42IDQuNiAxNiAyLjQgWiIgZmlsbD0iI0ZEQjgxMyIgc3Ryb2tlPSIjMEUxMTE2IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNiA0LjYgQzEzLjYgNi40IDExLjYgOC40IDExLjYgMTEgTDEyLjQgMTQuNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZFMDhBIiBzdHJva2Utd2lkdGg9IjEuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEzLjIgMTYuMiBoNS42IHYzLjIgaC01LjYgeiIgZmlsbD0iIzRBNTA1OCIgc3Ryb2tlPSIjMEUxMTE2IiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxyZWN0IHg9IjE0LjMiIHk9IjE5IiB3aWR0aD0iMy40IiBoZWlnaHQ9IjcuNCIgZmlsbD0iIzk2NjgyRiIgc3Ryb2tlPSIjMEUxMTE2IiBzdHJva2Utd2lkdGg9IjEuNCIvPjxyZWN0IHg9IjEwLjQiIHk9IjI2IiB3aWR0aD0iMTEuMiIgaGVpZ2h0PSIzLjYiIHJ4PSIxLjgiIGZpbGw9IiMyQTJGMzYiIHN0cm9rZT0iIzBFMTExNiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48L2c+PC9zdmc+") 6 6;
}

html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* --- Type -------------------------------------------------------------- */
.display{
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-0.012em;
  line-height:0.9;
}
.display-tight{ line-height:0.84; letter-spacing:-0.02em; }
.mono{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.16em;
}
.num{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700; font-variant-numeric:tabular-nums; }

/* Lead paragraph gets a slightly larger measure and looser leading */
.lead{ font-size:1.0625rem; line-height:1.75; }
@media (min-width:1024px){ .lead{ font-size:1.125rem; } }

/* --- Drawing-sheet furniture ------------------------------------------- */
.rule-t{ border-top:1px solid var(--rule); }
.rule-b{ border-bottom:1px solid var(--rule); }
.rule-l{ border-left:1px solid var(--rule); }
.on-dark .rule-t,.on-dark .rule-b,.on-dark .rule-l{ border-color:var(--rule-dark); }

/* faint grid, like a drawing sheet */
.sheet{
  background-image:
    linear-gradient(to right,rgba(18,21,26,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,21,26,.045) 1px,transparent 1px);
  background-size:88px 88px;
}
.sheet-dark{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:88px 88px;
}

/* corner registration ticks */
.ticks{ position:relative; }
.ticks::before,.ticks::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  border-color:var(--yellow); border-style:solid; border-width:0;
}
.ticks::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.ticks::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

.hazard{
  background-image:repeating-linear-gradient(-45deg,
    var(--yellow) 0 14px,var(--charcoal) 14px 28px);
}

/* Photography: one consistent treatment across every image on the page */
.plate{ filter:saturate(.82) contrast(1.06) brightness(.98); transition:filter .6s ease,transform .9s cubic-bezier(.2,.7,.3,1); }
.group:hover .plate{ filter:saturate(1) contrast(1.04) brightness(1); }

/* ==========================================================================
   HERO — three animated scenes on one stage
   Each scene is an <svg viewBox="0 0 1600 800">. Moving parts are nested <g>
   elements rotated about their own joints; transform-origin values are given
   in viewBox user units (transform-box: view-box) so they line up exactly
   with the joint coordinates the paths are drawn around.
   ========================================================================== */

.stage{ position:absolute; inset:0; overflow:hidden; background:#1a3350; }
.scene{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:scale(1.05);
  transition:opacity 1s ease,transform 1.6s cubic-bezier(.2,.7,.3,1),visibility 0s linear 1s;
}
.scene[data-active="true"]{ opacity:1; visibility:visible; transform:scale(1); transition-delay:0s; }
.scene svg{ width:100%; height:100%; display:block; }
/* idle scenes cost nothing */
.scene[data-active="false"] *{ animation-play-state:paused !important; }

/* Every animated part shares the view-box reference frame */
#boom,#dipper,#bucket,#bucketLoad,#machineBody,#dustDig,#dustDump,
#cloud1,#cloud2,#cloud3,#craneHook,
#drumFront,#drumRear,#rollerBody,#roadMarks,#roadCones,#sprayA,#sprayB,
#heat1,#heat2,#heat3,#paverSmoke,
#hoistCable,#pipeLoad,#pipeSway,#weldFlash,#weldGlow,#trenchDust{
  transform-box:view-box;
}

/* ---------- Scene 1 · earthwork: the digging linkage -------------------- */
#machineBody{ transform-origin:1225px 622px; animation:body-cycle 7s ease-in-out infinite; }
#boom       { transform-origin:1150px 530px; animation:boom-cycle 7s ease-in-out infinite; }
#dipper     { transform-origin:985px 400px;  animation:dipper-cycle 7s ease-in-out infinite; }
#bucket     { transform-origin:915px 528px;  animation:bucket-cycle 7s ease-in-out infinite; }
#bucketLoad { transform-origin:915px 528px;  animation:load-cycle 7s ease-in-out infinite; }
#dustDig    { animation:dust-dig 7s ease-out infinite; }
#dustDump   { animation:dust-dump 7s ease-out infinite; }

/* 0–15 idle · 15–35 extend · 35–50 scoop · 50–70 lift · 70–85 dump · 85–100 return.
   First and last frame of each track match exactly, so the loop is seamless. */
@keyframes boom-cycle{
  0%,15%{ transform:rotate(0deg); }
  35%   { transform:rotate(-16deg); }
  50%   { transform:rotate(-13deg); }
  70%   { transform:rotate(20deg); }
  85%   { transform:rotate(18deg); }
  100%  { transform:rotate(0deg); }
}
@keyframes dipper-cycle{
  0%,15%{ transform:rotate(-8deg); }
  35%   { transform:rotate(26deg); }
  50%   { transform:rotate(8deg); }
  70%   { transform:rotate(-20deg); }
  85%   { transform:rotate(-18deg); }
  100%  { transform:rotate(-8deg); }
}
@keyframes bucket-cycle{
  0%,15%{ transform:rotate(-20deg); }
  35%   { transform:rotate(20deg); }
  50%   { transform:rotate(-26deg); }
  70%,78%{ transform:rotate(-30deg); }
  85%   { transform:rotate(34deg); }
  92%   { transform:rotate(16deg); }
  100%  { transform:rotate(-20deg); }
}
@keyframes load-cycle{
  0%,44%{ transform:rotate(-20deg); opacity:0; }
  50%   { transform:rotate(-26deg); opacity:1; }
  70%,80%{ transform:rotate(-30deg); opacity:1; }
  86%   { transform:rotate(34deg); opacity:0; }
  100%  { transform:rotate(-20deg); opacity:0; }
}
@keyframes body-cycle{
  0%,15%{ transform:rotate(0deg); }
  38%   { transform:rotate(.5deg); }
  50%   { transform:rotate(-.9deg); }
  68%   { transform:rotate(.7deg); }
  86%   { transform:rotate(-.4deg); }
  100%  { transform:rotate(0deg); }
}
@keyframes dust-dig{
  0%,36%  { opacity:0; transform:translate(0,0) scale(.4); }
  42%     { opacity:.85; transform:translate(-10px,-16px) scale(1); }
  58%     { opacity:.5;  transform:translate(-30px,-40px) scale(1.5); }
  72%,100%{ opacity:0;   transform:translate(-48px,-58px) scale(1.9); }
}
@keyframes dust-dump{
  0%,83%{ opacity:0; transform:translate(0,0) scale(.5); }
  88%   { opacity:.9; transform:translate(4px,26px) scale(1.05); }
  95%   { opacity:.45; transform:translate(10px,64px) scale(1.5); }
  100%  { opacity:0; transform:translate(14px,88px) scale(1.8); }
}

/* ---------- Scene 2 · road construction --------------------------------
   The machine holds still and the road runs underneath it. Marking and cone
   groups are drawn twice their needed width and translated by exactly one
   repeat, so the loop is invisible. Drum rotation is timed to the same
   100 user-units/second ground speed, so the wheels don't skid.            */
#roadMarks{ animation:road-scroll 1.6s linear infinite; }   /* 160u repeat */
#roadCones{ animation:cone-scroll 4.8s linear infinite; }   /* 480u repeat */
#drumFront{ transform-origin:1032px 518px; animation:drum-spin 3.27s linear infinite; }
#drumRear { transform-origin:1268px 518px; animation:drum-spin 3.27s linear infinite; }
#rollerBody{ transform-origin:1150px 482px; animation:roller-bob 2.1s ease-in-out infinite; }
#sprayA{ animation:spray 1.1s linear infinite; }
#sprayB{ animation:spray 1.1s linear infinite .55s; }
#heat1{ animation:heat 4.5s ease-out infinite; }
#heat2{ animation:heat 4.5s ease-out infinite 1.5s; }
#heat3{ animation:heat 4.5s ease-out infinite 3s; }
#paverSmoke{ animation:smoke 6s ease-out infinite; }

@keyframes road-scroll{ from{ transform:translateX(-160px); } to{ transform:translateX(0); } }
@keyframes cone-scroll{ from{ transform:translateX(-480px); } to{ transform:translateX(0); } }
@keyframes drum-spin { from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@keyframes roller-bob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-2.5px) rotate(.35deg); }
}
@keyframes spray{
  0%  { opacity:0; transform:translateY(0) scaleY(.4); }
  25% { opacity:.7; }
  100%{ opacity:0; transform:translateY(26px) scaleY(1.3); }
}
@keyframes heat{
  0%  { opacity:0; transform:translateY(0) scale(.6); }
  20% { opacity:.42; }
  100%{ opacity:0; transform:translateY(-120px) scale(1.9); }
}
@keyframes smoke{
  0%  { opacity:0; transform:translate(0,0) scale(.5); }
  15% { opacity:.5; }
  100%{ opacity:0; transform:translate(-70px,-180px) scale(2.4); }
}

/* ---------- Scene 3 · pipelines ----------------------------------------
   The hoist rope scales from its anchor at the boom tip while the load
   translates by the matching distance, so the rope always meets the hook.
   Rope natural length 130u; scaleY 1 → 2.154 lengthens it by 150u, which is
   exactly how far #pipeLoad travels.                                       */
#hoistCable{ transform-origin:880px 170px; animation:hoist 9s ease-in-out infinite; }
#pipeLoad  { animation:lower 9s ease-in-out infinite; }
#pipeSway  { transform-origin:880px 300px; animation:sway-load 4.5s ease-in-out infinite; }
#weldFlash { animation:weld 3.4s steps(1,end) infinite; }
#weldGlow  { animation:weld-glow 3.4s ease-out infinite; }
#trenchDust{ animation:trench-dust 9s ease-out infinite; }

@keyframes hoist{
  0%,8%  { transform:scaleY(1); }
  38%,58%{ transform:scaleY(2.154); }
  88%,100%{ transform:scaleY(1); }
}
@keyframes lower{
  0%,8%  { transform:translateY(0); }
  38%,58%{ transform:translateY(150px); }
  88%,100%{ transform:translateY(0); }
}
@keyframes sway-load{
  0%,100%{ transform:rotate(1.4deg); }
  50%    { transform:rotate(-1.4deg); }
}
@keyframes weld{
  0%,4%  { opacity:1; }
  5%,11% { opacity:0; }
  12%,15%{ opacity:1; }
  16%,60%{ opacity:0; }
  61%,64%{ opacity:1; }
  65%,100%{ opacity:0; }
}
@keyframes weld-glow{
  0%   { opacity:.55; }
  20%  { opacity:.18; }
  62%  { opacity:.5; }
  100% { opacity:.12; }
}
@keyframes trench-dust{
  0%,40%{ opacity:0; transform:translateY(0) scale(.5); }
  50%   { opacity:.5; transform:translateY(-8px) scale(1); }
  70%,100%{ opacity:0; transform:translateY(-34px) scale(1.7); }
}

/* ---------- Shared sky motion ------------------------------------------ */
#cloud1{ animation:drift 90s linear infinite; }
#cloud2{ animation:drift 130s linear infinite; }
#cloud3{ animation:drift 170s linear infinite; }
@keyframes drift{ from{ transform:translateX(-260px); } to{ transform:translateX(1760px); } }
#craneHook{ transform-origin:322px 210px; animation:sway 9s ease-in-out infinite; }
@keyframes sway{ 0%,100%{ transform:rotate(2.2deg); } 50%{ transform:rotate(-2.2deg); } }

/* Mobile framing: the svg is drawn wider than the stage and pulled left so
   the slice lands on the machine, not on empty sky. The viewBox never
   changes, so every joint transform-origin above stays valid. */
@media (max-width:639px){
  .scene svg{ width:200%; margin-left:-79%; }
}

/* Hero copy crossfade ---------------------------------------------------- */
.hero-copy{ transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.3,1); }
.hero-copy[data-out="true"]{ opacity:0; transform:translateY(14px); }

@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.7; } 50%{ transform:translateY(8px); opacity:1; } }
.scroll-cue{ animation:nudge 2.2s ease-in-out infinite; }

/* ==========================================================================
   MARQUEE — two identical runs, translated by exactly one run
   ========================================================================== */
.marquee{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee 52s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Service matrix: hairlines shared between cells, no boxes */
.matrix{ border-top:1px solid var(--rule-dark); border-left:1px solid var(--rule-dark); }
.matrix > li{ border-right:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);
              transition:background-color .35s ease,color .35s ease; }
.matrix > li:hover{ background:var(--yellow); }
.matrix > li:hover .m-title,.matrix > li:hover .m-desc,
.matrix > li:hover .m-idx,.matrix > li:hover .m-icon{ color:var(--charcoal); }
.matrix > li:hover .m-desc{ opacity:.8; }

/* Project schedule rows */
.sched-row{ transition:background-color .3s ease,padding-left .3s ease; }
.sched-row:hover{ background:rgba(18,21,26,.04); padding-left:12px; }

/* Underline form fields */
.field{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:10px 0 12px; font-size:.9375rem; color:var(--ink);
  transition:border-color .3s ease;
}
.field::placeholder{ color:rgba(18,21,26,.32); }
.field:focus{ outline:none; border-bottom-color:var(--yellow); border-bottom-width:2px; padding-bottom:11px; }
.field-err{ border-bottom-color:var(--accent) !important; }
select.field{ appearance:none; background-image:
  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234B5563' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .1rem center; padding-right:1.5rem; }

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--yellow); outline-offset:3px;
}

/* ==========================================================================
   SHOVEL CURSOR (fine pointers only — never on touch)
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  body{ cursor:var(--cur-dig),auto; }
  a,button,summary,[role="button"],label,select,.marquee{ cursor:var(--cur-dig-hot),pointer; }
  input,textarea{ cursor:text; }
}

/* ==========================================================================
   REDUCED MOTION — hold every scene on a readable static frame
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #boom{ transform:rotate(12deg); }
  #dipper{ transform:rotate(-14deg); }
  #bucket,#bucketLoad{ transform:rotate(-28deg); }
  #bucketLoad{ opacity:1; }
  #dustDig,#dustDump,#trenchDust,#weldFlash{ opacity:0; }
  #hoistCable{ transform:scaleY(1.7); }
  #pipeLoad{ transform:translateY(90px); }
  .reveal{ opacity:1; transform:none; }
  .scene{ transition:none; }
}

@media print{ .no-print{ display:none !important; } }