/* ==========================================================================
   HRAYKI ENTERPRISE — Steel & Prefab Company
   Design system derived from the official company portfolio deck.
   Brand: Orange #CD6133 / Steel Blue #4B6085 / Light #ECECEC / Sand #E8E1DA
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --orange:        #CD6133;
  --orange-deep:   #B4502A;
  --orange-bright: #E5763E;
  --orange-tint:   rgba(205,97,51,.12);

  --steel:         #4B6085;
  --steel-deep:    #34445F;
  --steel-ink:     #253148;

  --bg:            #ECECEC;
  --bg-2:          #E4E4E4;
  --sand:          #E8E1DA;
  --sand-deep:     #DFD4C9;
  --white:         #FFFFFF;

  --ink:           #1C2434;
  --body:          #46536B;
  --muted:         #7C8798;
  --line:          rgba(37,49,72,.14);

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --shell: 1280px;
  --gut: clamp(20px, 5vw, 64px);

  --sh-1: 0 2px 10px rgba(28,36,52,.07);
  --sh-2: 0 14px 40px -12px rgba(28,36,52,.22);
  --sh-3: 0 34px 80px -24px rgba(28,36,52,.36);

  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--font-display); color:var(--ink); line-height:1.05; font-weight:400; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--orange); color:#fff; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--steel); border-radius:8px; border:3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--orange); }

/* ---------- 3. LAYOUT ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.shell-wide{ max-width:1560px; }
section{ position:relative; }
.pad{ padding-block:clamp(72px,10vw,140px); }
.pad-sm{ padding-block:clamp(48px,6vw,88px); }
.pt-0{ padding-top:0; } .pb-0{ padding-bottom:0; }

.grid{ display:grid; gap:clamp(24px,4vw,56px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-2-side{ grid-template-columns:.85fr 1.15fr; align-items:center; }
@media(max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:860px){ .g-2-side{ grid-template-columns:1fr; } }
@media(max-width:700px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

/* ---------- 4. BACKDROP GEOMETRY ---------- */
.bg-warm{ background:linear-gradient(168deg,#ECECEC 0%,#ECECEC 38%,#EBE4DC 70%,#E5DACE 100%); }
.bg-light{ background:var(--bg); }
.bg-white{ background:var(--white); }
.bg-steel{ background:var(--steel-deep); color:#D2DAE8; }
.bg-steel h1,.bg-steel h2,.bg-steel h3,.bg-steel h4{ color:#fff; }
.ovh{ overflow:hidden; }

.deco{ position:absolute; pointer-events:none; z-index:0; }
.deco-chevron{
  width:210px; height:210px;
  border-right:1.5px solid var(--orange);
  border-bottom:1.5px solid var(--orange);
  transform:rotate(45deg); opacity:.5;
}
.deco-chevron.steel{ border-color:var(--steel); opacity:.32; }
.wedge-navy{
  position:absolute; right:0; bottom:0; width:min(30vw,420px); aspect-ratio:1/.86;
  background:var(--steel); clip-path:polygon(100% 0,100% 100%,0 100%); z-index:0;
}
.wedge-orange{
  position:absolute; left:0; top:0; width:min(22vw,290px); aspect-ratio:1/.9;
  background:var(--orange); clip-path:polygon(0 0,100% 0,0 100%); z-index:0;
}
.dots{ display:flex; gap:12px; }
.dots i{ width:14px;height:14px;border-radius:50%;background:var(--steel);display:block; }

/* ---------- 5. TYPE ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.15rem,2vw,1.6rem); color:var(--orange);
  line-height:1; margin-bottom:22px;
}
.eyebrow::before{ content:''; width:4px; height:1.15em; background:var(--orange); border-radius:1px; flex:none; }
.eyebrow.steel{ color:var(--steel); } .eyebrow.steel::before{ background:var(--steel); }
.eyebrow.on-dark{ color:var(--orange-bright); } .eyebrow.on-dark::before{ background:var(--orange-bright); }

.kicker{
  font-family:var(--font-body); font-weight:600; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange);
  margin-bottom:18px; display:block;
}
.kicker.steel{ color:var(--steel); }
.kicker.on-dark{ color:var(--orange-bright); }

.display{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.6rem,7.2vw,6.2rem); line-height:.94;
  letter-spacing:-.022em; color:var(--orange);
}
.display.steel{ color:var(--steel); }
.display.ink{ color:var(--ink); }
.display.white{ color:#fff; }

.h-xl{ font-size:clamp(2.1rem,4.6vw,3.7rem); font-weight:300; letter-spacing:-.02em; line-height:1.02; }
.h-lg{ font-size:clamp(1.7rem,3vw,2.5rem); font-weight:300; letter-spacing:-.015em; }
.h-md{ font-size:clamp(1.24rem,2vw,1.55rem); font-weight:600; letter-spacing:-.01em; font-family:var(--font-body); }
.h-sm{ font-size:1.02rem; font-weight:600; font-family:var(--font-body); }

.lead{ font-size:clamp(1rem,1.35vw,1.14rem); font-weight:500; color:var(--steel); line-height:1.75; }
.lead.on-dark{ color:rgba(210,218,232,.85); }
.body-bold{ font-weight:600; color:var(--steel); }
.small{ font-size:.87rem; }
.muted{ color:var(--muted); }
.mark{ color:var(--orange); font-style:italic; font-weight:700; }
.max-64{ max-width:64ch; } .max-60{ max-width:60ch; } .max-52{ max-width:52ch; } .max-44{ max-width:44ch; }
.tc{ text-align:center; } .mx{ margin-inline:auto; }
.mt-s{ margin-top:18px } .mt-m{ margin-top:32px } .mt-l{ margin-top:52px }

.quote-rule{ border-left:3px solid var(--orange); padding-left:22px; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:34px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,64px); }

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 30px; font-weight:600; font-size:.9rem; letter-spacing:.02em;
  border-radius:2px; position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.btn svg{ width:16px;height:16px;transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn::after{ content:''; position:absolute; inset:0; z-index:-1; transform:translateY(101%); transition:transform .45s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:hover::after{ transform:translateY(0); }
.btn-orange{ background:var(--orange); color:#fff; } .btn-orange::after{ background:var(--steel); }
.btn-steel{ background:var(--steel); color:#fff; } .btn-steel::after{ background:var(--orange); }
.btn-ghost{ border:1.5px solid var(--steel); color:var(--steel); } .btn-ghost::after{ background:var(--steel); } .btn-ghost:hover{ color:#fff; }
.btn-ghost-light{ border:1.5px solid rgba(255,255,255,.45); color:#fff; } .btn-ghost-light::after{ background:var(--orange); } .btn-ghost-light:hover{ border-color:var(--orange); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.86rem;
  color:var(--orange); position:relative; padding-bottom:3px;
}
.link-arrow::before{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out);
}
.link-arrow:hover::before{ transform:scaleX(1); transform-origin:left; }
.link-arrow svg{ width:15px;height:15px; transition:transform .4s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- 7. ANGLED PHOTO FRAMES ---------- */
.slant{
  position:relative; display:block; overflow:hidden; background:var(--orange);
  padding:3px;
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.slant img{
  width:100%; height:100%; object-fit:cover;
  clip-path:polygon(6.2% 0, 100% 0, 93.8% 100%, 0 100%);
  transition:transform 1.1s var(--ease-out);
}
.slant:hover img{ transform:scale(1.06); }
.slant-l{ clip-path:polygon(0 0, 94% 0, 100% 100%, 6% 100%); }
.slant-l img{ clip-path:polygon(0 0, 93.8% 0, 100% 100%, 6.2% 100%); }
.slant.steel{ background:var(--steel); }
.frame{ border:2px solid var(--orange); overflow:hidden; position:relative; display:block; background:var(--bg-2); }
.frame img{ width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease-out); }
.frame:hover img{ transform:scale(1.05); }
.frame.steel{ border-color:var(--steel); }
.frame-offset{ position:relative; }
.frame-offset::before{ content:''; position:absolute; inset:auto auto -18px -18px; width:78%; height:78%; border:2px solid var(--white); z-index:0; }
.frame-offset > *{ position:relative; z-index:1; }

.ratio-1{ aspect-ratio:1/1; } .ratio-43{ aspect-ratio:4/3; }
.ratio-32{ aspect-ratio:3/2; } .ratio-169{ aspect-ratio:16/9; }
.ratio-45{ aspect-ratio:4/5; } .ratio-34{ aspect-ratio:3/4; }

/* ---------- 8. HEADER ---------- */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:900; padding-block:16px;
  transition:box-shadow .45s var(--ease), padding .45s var(--ease); }
.hdr::before{
  content:''; position:absolute; inset:0; background:rgba(236,236,236,.88);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  opacity:0; transition:opacity .45s var(--ease); border-bottom:1px solid var(--line);
}
.hdr.stuck::before{ opacity:1; }
.hdr.stuck{ padding-block:9px; box-shadow:0 6px 26px -18px rgba(28,36,52,.5); }
.hdr-in{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img{ height:50px; width:auto; transition:height .45s var(--ease); }
.hdr.stuck .brand img{ height:42px; }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a:not(.btn){ position:relative; padding:10px 15px; font-size:.84rem; font-weight:600; letter-spacing:.03em; color:var(--steel); transition:color .3s var(--ease); }
.nav a:not(.btn)::after{ content:''; position:absolute; left:15px; right:15px; bottom:4px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out); }
.nav a:not(.btn):hover{ color:var(--orange); }
.nav a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav a:not(.btn).on{ color:var(--orange); } .nav a:not(.btn).on::after{ transform:scaleX(1); }
/* buttons inside nav / footer keep their own white label + fill animation */
.nav a.btn, .nav a.btn:hover, .nav a.btn:focus,
.ftr a.btn, .ftr a.btn:hover, .ftr a.btn:focus{ color:#fff; }
.nav a.btn-ghost, .nav a.btn-ghost:hover{ color:var(--steel); }
.nav a.btn-ghost:hover{ color:#fff; }
.hdr-cta{ margin-left:14px; padding:12px 22px; font-size:.82rem; }

.burger{ display:none; width:44px;height:44px; position:relative; z-index:1002; }
.burger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--steel); border-radius:2px; transition:transform .45s var(--ease-out), opacity .25s, background .3s; }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
.burger.x span{ background:#fff; }
.burger.x span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.x span:nth-child(2){ opacity:0; }
.burger.x span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:1001; background:var(--steel-deep);
  clip-path:circle(0% at calc(100% - 42px) 42px); transition:clip-path .75s var(--ease-out);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
}
.drawer.open{ clip-path:circle(150% at calc(100% - 42px) 42px); }
.drawer > a{
  font-family:var(--font-display); font-weight:300; font-size:clamp(1.8rem,6.4vw,2.8rem);
  color:#fff; padding:9px 0; opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.drawer.open > a{ opacity:1; transform:none; }
.drawer > a:hover{ color:var(--orange-bright); }
.drawer-meta{ margin-top:34px; color:rgba(255,255,255,.6); font-size:.95rem; line-height:2; opacity:0; transition:opacity .5s .45s; }
.drawer-meta a{ color:rgba(255,255,255,.78); transition:color .3s; }
.drawer-meta a:hover{ color:var(--orange-bright); }
.drawer.open .drawer-meta{ opacity:1; }
@media(max-width:1080px){ .nav,.hdr-cta{ display:none; } .burger{ display:block; } }

/* ---------- 9. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:130px; padding-bottom:70px; overflow:hidden;
  background:linear-gradient(150deg,#EFEFEF 0%,#ECECEC 42%,#EBE3DA 74%,#E4D8CB 100%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; width:100%; position:relative; z-index:3; }
.hero h1{ font-weight:800; font-size:clamp(2.9rem,8.2vw,6.9rem); line-height:.9; letter-spacing:-.035em; color:var(--orange); margin-bottom:4px; }
.hero h1 .sub,
.banner h1 .sub{ display:block; color:var(--steel); font-weight:300; letter-spacing:-.03em; }
.hero-tag{ border-left:3px solid var(--orange); padding-left:20px; margin-top:32px; font-size:clamp(1rem,1.7vw,1.3rem); font-weight:500; color:var(--steel); line-height:1.5; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-stats{ display:flex; gap:clamp(20px,4vw,52px); margin-top:52px; flex-wrap:wrap; }
.hero-stats .n{ font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,3.4vw,2.9rem); color:var(--steel); line-height:1; }
.hero-stats .n b{ color:var(--orange); font-weight:300; }
.hero-stats .l{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:8px; font-weight:600; }

.hero-art{ position:relative; height:min(70vh,620px); }
.hero-art .slant{ position:absolute; box-shadow:var(--sh-3); }
.hero-art .a{ left:0; top:10%; width:57%; height:78%; }
.hero-art .b{ right:0; top:0; width:52%; height:56%; }
.hero-connect{ position:absolute; left:-8%; bottom:14%; width:42%; height:32%; border:1px solid var(--steel); opacity:.4; z-index:1; }
.hero-scroll{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.hero-scroll .bar{ width:1px; height:42px; background:rgba(124,135,152,.3); position:relative; overflow:hidden; }
.hero-scroll .bar::after{ content:''; position:absolute; inset:0; background:var(--orange); animation:scrollbar 1.9s var(--ease) infinite; }
@keyframes scrollbar{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }
@media(max-width:940px){ .hero-grid{ grid-template-columns:1fr; } .hero-art{ height:52vh; order:-1; } .hero-scroll{ display:none; } }

/* page banner */
.banner{ position:relative; padding-top:clamp(148px,17vw,210px); padding-bottom:clamp(52px,7vw,88px); overflow:hidden;
  background:linear-gradient(160deg,#EFEFEF 0%,#ECECEC 45%,#EAE1D8 100%); }
.banner .crumbs{ font-size:.73rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:18px; }
.banner .crumbs a:hover{ color:var(--orange); }
.banner .crumbs span{ color:var(--orange); }
.banner-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,64px); align-items:end; position:relative; z-index:2; }
@media(max-width:860px){ .banner-grid{ grid-template-columns:1fr; } }

/* ---------- 10. 3D BUILD SECTION ---------- */
.build{ background:#2B3A54; position:relative; }
.build-track{ position:relative; }
.build-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
#build-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.build-title{ position:absolute; left:var(--gut); top:clamp(88px,12vh,132px); z-index:4; pointer-events:none; max-width:min(520px,60vw); }
.build-hud{ position:absolute; left:var(--gut); bottom:9vh; max-width:min(430px,52vw); z-index:4; pointer-events:none; }
.build-step{ position:absolute; inset:auto auto 0 0; opacity:0; transform:translateY(26px); transition:opacity .5s var(--ease), transform .6s var(--ease-out); }
.build-step.on{ opacity:1; transform:none; position:relative; }
.build-step .no{ font-family:var(--font-display); font-weight:400; font-size:.78rem; letter-spacing:.3em; color:var(--orange-bright); margin-bottom:12px; display:block; }
.build-step h3{ color:#fff; font-weight:300; font-size:clamp(1.6rem,3.1vw,2.5rem); margin-bottom:13px; letter-spacing:-.02em; }
.build-step p{ color:rgba(210,220,236,.8); font-size:.95rem; font-weight:400; margin:0; }
.build-progress{ position:absolute; right:var(--gut); top:50%; transform:translateY(-50%); z-index:4; display:flex; flex-direction:column; gap:13px; align-items:flex-end; pointer-events:none; }
.build-progress .p{ display:flex; align-items:center; gap:12px; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(203,213,230,.38); font-weight:600; transition:color .4s; }
.build-progress .p i{ display:block; width:28px; height:2px; background:rgba(203,213,230,.26); transition:all .5s var(--ease); }
.build-progress .p.on{ color:var(--orange-bright); }
.build-progress .p.on i{ width:56px; background:var(--orange-bright); }
.build-hint{ position:absolute; right:var(--gut); bottom:5vh; z-index:4; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(203,213,230,.4); font-weight:600; pointer-events:none; }
.build-meter{ position:absolute; left:0; bottom:0; height:3px; background:var(--orange-bright); z-index:5; width:0; }
@media(max-width:820px){
  .build-hud{ max-width:none; right:var(--gut); bottom:5vh; }
  .build-progress,.build-hint{ display:none; }
  .build-title{ max-width:none; right:var(--gut); }
}

/* ---------- 11. CARDS ---------- */
.card{ position:relative; background:var(--white); padding:clamp(24px,2.6vw,34px); border:1px solid var(--line); overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s; height:100%; }
.card::before{ content:''; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out); }
.card:hover{ transform:translateY(-7px); box-shadow:var(--sh-2); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:.93rem; margin:0; }
.card .ico{ width:52px;height:52px; margin-bottom:20px; display:grid; place-items:center; background:var(--orange-tint); color:var(--orange);
  transition:background .45s var(--ease), color .45s var(--ease), transform .55s var(--ease-out); }
.card .ico svg{ width:26px;height:26px; }
.card:hover .ico{ background:var(--orange); color:#fff; transform:rotate(-6deg) scale(1.05); }
.card.dark{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); }
.card.dark h3{ color:#fff; } .card.dark p{ color:rgba(206,216,232,.75); }
.card.dark .ico{ background:rgba(229,118,62,.18); color:var(--orange-bright); }

.svc{ position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; height:100%;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.svc:hover{ transform:translateY(-7px); box-shadow:var(--sh-2); }
.svc-img{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--steel-deep); }
.svc-img img{ width:100%;height:100%;object-fit:cover; transition:transform 1.2s var(--ease-out); }
.svc:hover .svc-img img{ transform:scale(1.07); }
.svc-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(43,58,84,0) 40%,rgba(43,58,84,.6) 100%); }
.svc-no{ position:absolute; left:0; top:0; z-index:2; background:var(--orange); color:#fff; font-family:var(--font-display); font-weight:400; font-size:.8rem; letter-spacing:.1em; padding:8px 15px; }
.svc-body{ padding:26px clamp(20px,2.2vw,30px) 30px; flex:1; display:flex; flex-direction:column; }
.svc-body h3{ margin-bottom:11px; }
.svc-body p{ font-size:.92rem; flex:1; }
.svc-body .ticks{ margin-top:6px; }
.svc-body .ticks li{ font-size:.85rem; padding:6px 0; }

.stat .n{ font-family:var(--font-display); font-weight:300; line-height:1; font-size:clamp(2.6rem,5vw,4.2rem); color:var(--orange); letter-spacing:-.03em; }
.stat .l{ font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--steel); font-weight:600; margin-top:12px; }
.stat .d{ font-size:.86rem; color:var(--muted); margin-top:8px; }
.stat.on-dark .l{ color:rgba(210,218,232,.8); } .stat.on-dark .n{ color:var(--orange-bright); } .stat.on-dark .d{ color:rgba(180,192,212,.6); }

.trust{ display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); align-items:flex-start; }
.trust:last-child{ border-bottom:0; }
.trust .n{ font-family:var(--font-display); font-weight:400; font-size:.95rem; color:var(--orange); min-width:42px; padding-top:4px; letter-spacing:.08em; }
.trust h4{ font-family:var(--font-body); font-weight:600; font-size:1.02rem; color:var(--ink); margin-bottom:5px; }
.trust p{ margin:0; font-size:.93rem; }

/* ---------- 12. PROJECTS ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:44px; }
.filters button{ padding:10px 20px; font-size:.78rem; font-weight:600; letter-spacing:.05em; border:1px solid var(--line); color:var(--steel); background:transparent; transition:all .35s var(--ease); }
.filters button:hover{ border-color:var(--orange); color:var(--orange); }
.filters button.on{ background:var(--steel); border-color:var(--steel); color:#fff; }

.projects{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px); }
@media(max-width:980px){ .projects{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .projects{ grid-template-columns:1fr; } }

.proj{ position:relative; overflow:hidden; background:var(--steel-deep); cursor:pointer; aspect-ratio:4/3.4; display:block; width:100%; text-align:left;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.proj img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover; transition:transform 1.3s var(--ease-out); }
.proj::after{ content:''; position:absolute; inset:0; background:linear-gradient(178deg,rgba(37,49,72,.05) 28%,rgba(30,41,61,.58) 64%,rgba(24,34,52,.94) 100%); }
.proj:hover{ transform:translateY(-8px); box-shadow:var(--sh-3); }
.proj:hover img{ transform:scale(1.09); }
.proj-tag{ position:absolute; z-index:3; left:0; top:0; background:var(--orange); color:#fff; font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:7px 14px; transform:translateY(-100%); transition:transform .5s var(--ease-out); }
.proj:hover .proj-tag{ transform:none; }
.proj-meta{ position:absolute; z-index:3; inset:auto 0 0 0; padding:26px clamp(18px,2vw,26px); }
.proj-meta .y{ font-size:.66rem; letter-spacing:.18em; color:var(--orange-bright); font-weight:600; margin-bottom:8px; }
.proj-meta h3{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:1.01rem; line-height:1.35; }
.proj-meta .loc{ color:rgba(255,255,255,.66); font-size:.8rem; margin-top:6px; display:flex; align-items:center; gap:7px; }
.proj-meta .loc svg{ width:13px;height:13px;flex:none; }
.proj-open{ position:absolute; z-index:3; right:20px; bottom:22px; width:40px;height:40px; border:1.5px solid rgba(255,255,255,.4); display:grid;place-items:center; color:#fff; opacity:0; transform:translateY(10px) rotate(-25deg); transition:all .5s var(--ease-out); }
.proj:hover .proj-open{ opacity:1; transform:none; background:var(--orange); border-color:var(--orange); }
.proj-open svg{ width:16px;height:16px; }
.proj.hide{ display:none; }
.proj .count{ position:absolute; z-index:3; right:18px; top:18px; font-size:.68rem; font-weight:600; color:#fff; background:rgba(28,36,52,.5); backdrop-filter:blur(6px); padding:5px 10px; display:flex; align-items:center; gap:6px; }
.proj .count svg{ width:12px;height:12px; }

.lb{ position:fixed; inset:0; z-index:1200; background:rgba(21,29,44,.965); display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,58px); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s; backdrop-filter:blur(6px); }
.lb.open{ opacity:1; visibility:visible; }
.lb-in{ width:100%; max-width:1140px; transform:scale(.96); transition:transform .55s var(--ease-out); }
.lb.open .lb-in{ transform:none; }
.lb-stage{ position:relative; background:#111823; aspect-ratio:16/10; overflow:hidden; border:2px solid var(--orange); }
.lb-stage img{ position:absolute; inset:0; width:100%;height:100%;object-fit:contain; opacity:0; transition:opacity .45s var(--ease); }
.lb-stage img.on{ opacity:1; }
.lb-bar{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-top:20px; color:#fff; flex-wrap:wrap; }
.lb-bar h3{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:1.12rem; margin-bottom:6px; }
.lb-bar p{ color:rgba(255,255,255,.6); font-size:.87rem; margin:0; }
.lb-nav{ display:flex; gap:10px; align-items:center; }
.lb-nav button{ width:46px;height:46px; border:1.5px solid rgba(255,255,255,.28); color:#fff; display:grid;place-items:center; transition:all .35s var(--ease); }
.lb-nav button:hover{ background:var(--orange); border-color:var(--orange); }
.lb-nav svg{ width:18px;height:18px; }
.lb-count{ color:rgba(255,255,255,.58); font-size:.82rem; min-width:56px; text-align:center; font-weight:600; }
.lb-x{ position:absolute; right:clamp(14px,3vw,32px); top:clamp(14px,3vw,32px); width:48px;height:48px; border:1.5px solid rgba(255,255,255,.28); color:#fff; display:grid;place-items:center; z-index:3; transition:all .35s var(--ease); }
.lb-x:hover{ background:var(--orange); border-color:var(--orange); transform:rotate(90deg); }
.lb-x svg{ width:18px;height:18px; }
.lb-thumbs{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.lb-thumbs button{ width:72px; aspect-ratio:4/3; overflow:hidden; opacity:.4; border:2px solid transparent; transition:all .35s; }
.lb-thumbs button.on{ opacity:1; border-color:var(--orange); }
.lb-thumbs img{ width:100%;height:100%;object-fit:cover; }

/* ---------- 13. TIMELINE ---------- */
.tl{ position:relative; padding-left:38px; }
.tl::before{ content:''; position:absolute; left:8px; top:8px; bottom:8px; width:1.5px; background:var(--line); }
.tl-fill{ position:absolute; left:8px; top:8px; width:1.5px; background:var(--orange); height:0; transition:height 1.6s var(--ease-out); }
.tl-item{ position:relative; padding-bottom:42px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:-34px; top:9px; width:17px;height:17px; border-radius:50%; background:var(--bg); border:2px solid var(--steel); transition:all .5s var(--ease); }
.tl-item.lit::before{ border-color:var(--orange); background:var(--orange); box-shadow:0 0 0 5px var(--orange-tint); }
.tl-item .yr{ font-family:var(--font-display); font-weight:300; font-size:1.7rem; color:var(--orange); line-height:1; margin-bottom:9px; }
.tl-item h4{ font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:7px; }
.tl-item p{ margin:0; font-size:.93rem; }

/* ---------- 14. ACCORDION ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; text-align:left;
  font-family:var(--font-body); font-weight:600; font-size:clamp(1rem,1.5vw,1.12rem); color:var(--ink); transition:color .35s; }
.acc-q:hover{ color:var(--orange); }
.acc-q .pm{ position:relative; width:22px;height:22px; flex:none; }
.acc-q .pm::before,.acc-q .pm::after{ content:''; position:absolute; background:var(--orange); transition:transform .45s var(--ease-out); }
.acc-q .pm::before{ left:0; top:10px; width:22px;height:2px; }
.acc-q .pm::after{ left:10px; top:0; width:2px;height:22px; }
.acc-item.open .pm::after{ transform:rotate(90deg) scaleX(0); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease-out); }
.acc-a > div{ padding:0 0 28px; max-width:72ch; font-size:.95rem; }

/* ---------- 15. SPLIT ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split-media{ position:relative; min-height:clamp(320px,46vw,600px); overflow:hidden; }
.split-media img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover; }
.split-body{ padding:clamp(36px,5.5vw,84px); display:flex; flex-direction:column; justify-content:center; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } }

.ticks li{ display:flex; gap:13px; padding:10px 0; font-size:.94rem; color:var(--steel); font-weight:500; }
.ticks li svg{ width:18px;height:18px;flex:none; color:var(--orange); margin-top:4px; }
.ticks.on-dark li{ color:rgba(212,222,238,.86); }

/* ---------- 16. CTA ---------- */
.cta{ position:relative; overflow:hidden; background:var(--steel-deep); color:#fff; }
.cta .shell{ position:relative; z-index:2; }
.cta h2{ color:#fff; }
.cta-grid{ display:flex; align-items:center; justify-content:space-between; gap:44px; flex-wrap:wrap; }

/* ---------- 17. CONTACT ---------- */
/* Deck-style contact lines: bare orange glyph + steel-blue label, exactly as the
   "Get in Touch with Us" slide in the company portfolio. */
.ct-deck{ display:grid; }
.ct-line{ display:flex; align-items:center; gap:20px; padding:14px 0; }
.ct-line .g{ width:34px; height:34px; flex:none; color:var(--orange); transition:transform .45s var(--ease); }
.ct-line:hover .g{ transform:translateY(-2px) scale(1.06); }
.ct-line .t{ font-size:clamp(1.02rem,1.5vw,1.26rem); font-weight:500; color:var(--steel); line-height:1.4; }
.ct-line .t a{ transition:color .3s var(--ease); }
.ct-line .t a:hover{ color:var(--orange); }
.ct-line .t .sep{ color:var(--muted); margin:0 9px; font-weight:400; }
.ct-line .t small{ display:block; font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:2px; }

.ct-social{ display:flex; align-items:center; gap:15px; padding:16px 0 4px; flex-wrap:wrap; }
.ct-social a.ic{ width:34px; height:34px; flex:none; color:var(--orange); display:block; transition:transform .45s var(--ease), color .3s; }
.ct-social a.ic:hover{ transform:translateY(-3px) scale(1.08); color:var(--orange-deep); }
.ct-social .handle{ font-size:clamp(1.02rem,1.5vw,1.26rem); font-weight:500; color:var(--steel); margin-left:8px; transition:color .3s; }
.ct-social a.handle:hover{ color:var(--orange); }
@media(max-width:420px){ .ct-social .handle{ margin-left:0; width:100%; } }


.ct-row{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); align-items:center; }
.ct-row:last-child{ border-bottom:0; }
.ct-ico{ width:50px;height:50px;flex:none; display:grid;place-items:center; border:1.5px solid var(--orange); color:var(--orange); transition:all .4s var(--ease); }
.ct-ico svg{ width:21px;height:21px; }
.ct-row:hover .ct-ico{ background:var(--orange); color:#fff; }
.ct-row .l{ font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ct-row .v{ font-size:1.02rem; font-weight:600; color:var(--ink); }
.ct-row a.v:hover{ color:var(--orange); }

/* direct-contact action stack (no backend: mailto / tel / WhatsApp only) */
.reach{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.reach .btn{ justify-content:flex-start; }
.reach .btn svg{ width:18px; height:18px; }
@media(min-width:560px){
  .reach{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .reach .btn{ flex:1 1 auto; }
}
.btn-wa{ background:#1FA855; color:#fff; }
.btn-wa::after{ background:var(--steel); }
.btn-wa:hover svg{ transform:none; }
.form-note{ font-size:.8rem; color:var(--muted); }

/* ---------- 18. FOOTER ---------- */
.ftr{ background:#222E42; color:rgba(205,215,231,.7); padding-top:clamp(56px,7vw,86px); }
.ftr h4{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:.76rem; letter-spacing:.19em; text-transform:uppercase; margin-bottom:22px; }
.ftr a:not(.btn){ transition:color .3s; font-size:.91rem; }
.ftr a:not(.btn):hover{ color:var(--orange-bright); }
.ftr li{ padding:6px 0; }
.ftr-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:clamp(28px,4vw,56px); padding-bottom:50px; }
@media(max-width:900px){ .ftr-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .ftr-top{ grid-template-columns:1fr; } }
.ftr-logo{ height:54px; width:auto; margin-bottom:20px; }
.ftr-bot{ border-top:1px solid rgba(255,255,255,.09); padding:22px 0 30px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.8rem; }
.ftr-powered{ font-size:inherit; text-decoration:underline; text-underline-offset:.18em; }
.ftr-powered:hover{ text-decoration:underline; }
.soc{ display:flex; gap:10px; margin-top:22px; }
.soc a{ width:42px;height:42px; border:1px solid rgba(255,255,255,.18); display:grid;place-items:center; color:#fff; transition:all .4s var(--ease); }
.soc a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); }
.soc svg{ width:17px;height:17px; }

/* ---------- 19. MOTION ---------- */
/* Reveal states are scoped to .js so content can never be permanently hidden
   if JavaScript is blocked or fails to run. */
.js [data-rv]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); will-change:opacity,transform; }
.js [data-rv].in{ opacity:1; transform:none; }
.js [data-rv="l"]{ transform:translateX(-40px); } .js [data-rv="r"]{ transform:translateX(40px); }
.js [data-rv="s"]{ transform:scale(.94); }
/* "clip" reveal: the media stays visible and a curtain wipes off it, so a failed
   reveal can never leave an empty white panel. */
.js [data-rv="clip"]{ opacity:1; transform:none; position:relative; will-change:auto; }
.js [data-rv="clip"] > img{ z-index:1; }
.js [data-rv="clip"]::after{
  content:''; position:absolute; inset:0; z-index:3; background:var(--bg);
  transform:scaleX(1); transform-origin:right;
  transition:transform 1.05s var(--ease-out);
}
.js [data-rv="clip"].in::after{ transform:scaleX(0); }
[data-rvd="1"]{ transition-delay:.09s } [data-rvd="2"]{ transition-delay:.18s }
[data-rvd="3"]{ transition-delay:.27s } [data-rvd="4"]{ transition-delay:.36s }
[data-rvd="5"]{ transition-delay:.45s } [data-rvd="6"]{ transition-delay:.54s }

.marquee{ overflow:hidden; border-block:1px solid var(--line); padding:17px 0; background:var(--bg-2); }
.marquee-in{ display:flex; width:max-content; animation:mq 38s linear infinite; }
.marquee span{ font-family:var(--font-display); font-weight:300; font-size:clamp(1rem,1.6vw,1.32rem); color:var(--steel); display:flex; align-items:center; gap:46px; white-space:nowrap; padding-right:46px; }
.marquee span::after{ content:''; width:7px;height:7px;background:var(--orange);border-radius:50%; flex:none; }
@keyframes mq{ to{ transform:translateX(-50%); } }

.progress-bar{ position:fixed; left:0; top:0; height:3px; background:var(--orange); z-index:1000; width:0; transition:width .12s linear; }

@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .js [data-rv="clip"]::after{ transform:scaleX(0) !important; }
}