/* ================================================================
   CEYLON REFUEL ENGINEERING — MASTER STYLESHEET
   ✏  TO RETHEME: change --ac below. Everything reads from it.
   ================================================================ */
:root {
  --ac:        #4682B4;
  --ac-light:  #5A9FD4;
  --ac-dark:   #325E8A;
  --ac-dim:    rgba(70,130,180,0.14);
  --ac-line:   rgba(70,130,180,0.26);

  --cream:     #EDF2F7;
  --cream-dim: rgba(237,242,247,0.70);
  --muted:     rgba(237,242,247,0.46);
  --muted2:    rgba(237,242,247,0.22);
  --muted3:    rgba(237,242,247,0.09);

  --dark:      #07090E;
  --dark2:     #0D1219;
  --dark3:     #131B25;
  --dark4:     #1B2434;

  --card-bg:     rgba(19,27,37,0.92);
  --card-border: rgba(70,130,180,0.18);

  --fd: 'Bebas Neue', sans-serif;
  --fb: 'Barlow', sans-serif;

  --max-w:  1160px;
  --gap:    6rem;
  --r:      8px;
  --t:      0.24s ease;
  --t2:     0.38s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { font-family:var(--fb); background:var(--dark); color:var(--cream); overflow-x:hidden; line-height:1.65; -webkit-font-smoothing:antialiased; }
a     { color:inherit; text-decoration:none; }
img   { display:block; max-width:100%; }
ul    { list-style:none; }
button{ cursor:pointer; font-family:var(--fb); }

::-webkit-scrollbar              { width:5px; }
::-webkit-scrollbar-track        { background:var(--dark); }
::-webkit-scrollbar-thumb        { background:var(--ac-dim); border-radius:99px; }
::-webkit-scrollbar-thumb:hover  { background:var(--ac); }

/* layout */
.wrap    { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; width:100%; }
.section { position:relative; z-index:1; padding:var(--gap) 0; }
.divider { position:relative; z-index:1; height:1px; background:linear-gradient(90deg,transparent,var(--ac-line),transparent); }

/* nav */
.navbar { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:1.25rem 2rem; transition:background var(--t2),padding var(--t2),box-shadow var(--t2); }
.navbar.stuck { background:rgba(7,9,14,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 1px 0 var(--ac-line); padding:.72rem 2rem; }
.nav-brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.nav-brand-icon { width:38px !important; height:38px !important; max-width:38px !important; max-height:38px !important; flex-shrink:0; display:block; }
.nav-brand-text { display:flex; flex-direction:column; line-height:1.15; }
.nav-brand-name { font-family:var(--fd); font-size:16.5px; letter-spacing:.14em; color:var(--ac); }
.nav-brand-sub  { font-size:8px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:.1rem; }
.nav-a { display:inline-block; font-size:.87rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:.56rem 1rem; border-radius:var(--r); transition:color var(--t),background var(--t); position:relative; white-space:nowrap; }
.nav-a:hover,.nav-a.on { color:var(--cream); background:var(--muted3); }
.nav-a.on::after { content:''; position:absolute; bottom:3px; left:.82rem; right:.82rem; height:1px; background:var(--ac); }
.nav-drop { position:relative; }
.nav-drop-btn { display:flex; align-items:center; gap:5px; font-size:.87rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:.56rem 1rem; border-radius:var(--r); border:none; background:none; transition:color var(--t),background var(--t); white-space:nowrap; }
.nav-drop-btn:hover { color:var(--cream); background:var(--muted3); }
.nav-drop-btn .chev { width:9px; height:9px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform var(--t); }
.nav-drop:hover .chev { transform:rotate(180deg); }
.nav-drop-menu { position:absolute; top:calc(100% + 7px); left:0; background:rgba(9,13,21,.97); border:1px solid var(--ac-line); border-radius:var(--r); padding:.45rem; min-width:228px; opacity:0; visibility:hidden; transform:translateY(-7px); transition:opacity var(--t),visibility var(--t),transform var(--t); backdrop-filter:blur(16px); z-index:10; }
.nav-drop:hover .nav-drop-menu { opacity:1; visibility:visible; transform:none; }
.nav-drop-item { display:block; padding:.5rem .82rem; font-size:.76rem; font-weight:500; letter-spacing:.05em; color:var(--muted); border-radius:5px; transition:color var(--t),background var(--t); }
.nav-drop-item:hover { color:var(--ac); background:var(--ac-dim); }
.nav-drop-hr { height:1px; background:var(--ac-line); margin:.32rem 0; opacity:.45; }
.nav-cta { font-size:.84rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--ac); border:none; padding:.58rem 1.35rem; border-radius:var(--r); transition:background var(--t),transform var(--t); white-space:nowrap; }
.nav-cta:hover { background:var(--ac-light); transform:translateY(-1px); }
.nav-ham { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:3px; }
.nav-ham span { display:block; width:22px; height:2px; background:var(--cream); border-radius:2px; transition:transform var(--t),opacity var(--t); }
.nav-ham.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-ham.open span:nth-child(2){ opacity:0; }
.nav-ham.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-drawer { display:none; position:fixed; inset:0; top:58px; z-index:190; background:rgba(7,9,14,.98); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); flex-direction:column; padding:1.4rem 1.4rem 3rem; gap:.25rem; overflow-y:auto; }
.nav-drawer.open { display:flex; }
.nav-drawer .nav-a,.nav-drawer .nav-drop-btn { width:100%; font-size:.9rem; padding:.76rem 1rem; text-align:left; justify-content:flex-start; }
.nav-drawer-sub { padding-left:1.1rem; border-left:2px solid var(--ac-line); margin:.2rem 0 .2rem .55rem; }
.nav-drawer-sub .nav-a { font-size:.82rem; color:var(--muted); }
.nav-drawer-hr { height:1px; background:var(--ac-line); margin:.35rem 0; opacity:.35; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--fb); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.86rem 1.85rem; border-radius:var(--r); border:none; cursor:pointer; white-space:nowrap; transition:background var(--t),border-color var(--t),transform var(--t),box-shadow var(--t); }
.btn-solid { color:#fff; background:var(--ac); }
.btn-solid:hover { background:var(--ac-light); transform:translateY(-2px); box-shadow:0 8px 26px rgba(70,130,180,.36); }
.btn-ghost { color:var(--cream); background:transparent; border:1px solid var(--ac-line); }
.btn-ghost:hover { border-color:var(--ac); background:var(--ac-dim); transform:translateY(-2px); }
.btn-ghost-light { color:#EDF2F7; background:transparent; border:1px solid rgba(237,242,247,.3); }
.btn-ghost-light:hover { background:rgba(237,242,247,.1); border-color:rgba(237,242,247,.6); }

/* section typography */
.s-eyebrow { display:block; font-size:8.5px; font-weight:600; letter-spacing:.38em; text-transform:uppercase; color:var(--ac); margin-bottom:.82rem; }
.s-title   { font-family:var(--fd); font-size:clamp(2.4rem,5.2vw,4.6rem); line-height:.92; letter-spacing:.04em; color:var(--cream); margin-bottom:1.25rem; }
.s-title .hi { color:var(--ac); }
.s-body    { font-size:.97rem; font-weight:300; color:var(--cream-dim); line-height:1.8; max-width:550px; }
.rule      { width:52px; height:2px; background:var(--ac); margin:1.1rem 0; }

/* cards */
.card { position:relative; overflow:hidden; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r); padding:1.75rem; transition:border-color var(--t),transform var(--t2); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--ac),transparent); opacity:0; transition:opacity var(--t); }
.card:hover { border-color:rgba(70,130,180,.44); transform:translateY(-4px); }
.card:hover::before { opacity:1; }
.card-icon { width:48px; height:48px; border-radius:9px; background:var(--ac-dim); border:1px solid var(--ac-line); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; flex-shrink:0; }
.card-icon svg { width:23px; height:23px; fill:var(--ac); }
.card-title { font-family:var(--fd); font-size:1.35rem; letter-spacing:.06em; color:var(--cream); margin-bottom:.5rem; }
.card-body  { font-size:.87rem; font-weight:300; color:var(--muted); line-height:1.72; }

/* stats */
.stats-row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); }
.stat-cell { padding:2rem 1.5rem; text-align:center; border-right:1px solid var(--ac-line); border-bottom:1px solid var(--ac-line); transition:background var(--t); }
.stat-cell:hover { background:rgba(70,130,180,.06); }
.stat-num  { font-family:var(--fd); font-size:3rem; line-height:1; color:var(--ac); letter-spacing:.02em; margin-bottom:.28rem; }
.stat-lbl  { font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* grids */
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }

/* tags */
.tag { display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); background:var(--ac-dim); border:1px solid var(--ac-line); padding:.18rem .58rem; border-radius:4px; }
.tag-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.rule { width:52px; height:2px; background:var(--ac); margin:1.1rem 0; }

/* mission box */
.mission-box { background:var(--card-bg); border:1px solid var(--ac-line); border-left:3px solid var(--ac); border-radius:0 var(--r) var(--r) 0; padding:1.7rem 2rem; margin-bottom:1.4rem; }
.mission-box p { font-size:.99rem; font-weight:300; color:var(--cream-dim); line-height:1.82; }

/* timeline */
.timeline { position:relative; padding-left:1.9rem; }
.timeline::before { content:''; position:absolute; top:0; left:.52rem; bottom:0; width:1px; background:var(--ac-line); }
.tl-item { position:relative; margin-bottom:1.9rem; }
.tl-dot  { position:absolute; left:-1.42rem; top:.28rem; width:11px; height:11px; border-radius:50%; background:var(--ac); border:2px solid var(--dark); box-shadow:0 0 0 4px var(--ac-dim); }
.tl-year { font-family:var(--fd); font-size:1.1rem; color:var(--ac); margin-bottom:.18rem; }
.tl-text { font-size:.87rem; color:var(--muted); font-weight:300; line-height:1.7; }

/* footer */
#foot-mount { background:var(--dark); position:relative; z-index:1; }
.footer { position:relative; z-index:1; background:var(--dark); border-top:1px solid var(--ac-line); padding:3.8rem 0 0; }
.footer-grid { display:grid; grid-template-columns:1.9fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.8rem; }
.footer-name { font-family:var(--fd); font-size:19px; letter-spacing:.14em; color:var(--ac); display:block; }
.footer-sub  { font-size:8px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.95rem; }
.footer-brand-text { font-size:.85rem; font-weight:300; color:var(--muted); line-height:1.72; max-width:275px; }
.footer-col-hd { font-family:var(--fd); font-size:1rem; letter-spacing:.1em; color:var(--cream); margin-bottom:1.05rem; }
.footer-col { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:.58rem; }
.footer-col a  { font-size:.83rem; color:var(--muted); transition:color var(--t); }
.footer-col a:hover { color:var(--ac); }
.footer-bar  { border-top:1px solid rgba(70,130,180,.09); padding:1.25rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.9rem; }
.footer-copy { font-size:.76rem; color:var(--muted2); }
.footer-dev  { font-size:.74rem; color:var(--muted2); }
.footer-dev span { color:var(--ac); font-weight:600; }
.soc-row { display:flex; gap:7px; }
.soc-btn { width:31px; height:31px; border-radius:50%; border:1px solid var(--ac-line); display:flex; align-items:center; justify-content:center; transition:border-color var(--t),background var(--t); }
.soc-btn:hover { border-color:var(--ac); background:var(--ac-dim); }
.soc-btn svg { width:13px !important; height:13px !important; max-width:13px !important; max-height:13px !important; fill:var(--muted); transition:fill var(--t); flex-shrink:0; }
.soc-btn:hover svg { fill:var(--ac); }

/* contact */
.cform { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r); padding:2.1rem; }
.cform-group { margin-bottom:1.25rem; }
.cform-lbl { display:block; font-size:.73rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.48rem; }
.cfield { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--ac-line); border-radius:var(--r); color:var(--cream); font-family:var(--fb); font-size:.9rem; padding:.8rem 1rem; outline:none; transition:border-color var(--t),box-shadow var(--t); }
.cfield:focus { border-color:var(--ac); box-shadow:0 0 0 3px rgba(70,130,180,.11); }
.cfield::placeholder { color:var(--muted2); }
.cfield.error { border-color:rgba(220,80,80,.6); }
textarea.cfield { resize:vertical; min-height:128px; }
select.cfield { appearance:none; -webkit-appearance:none; cursor:pointer; }
select.cfield option { background:var(--dark3); }
.select-wrap { position:relative; }
.select-chev { position:absolute; right:.95rem; top:50%; transform:translateY(-50%); pointer-events:none; width:11px; height:11px; fill:none; stroke:var(--muted); stroke-width:1.8; }
.ci-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r); padding:1.6rem; }
.ci-item { display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.5rem; }
.ci-item:last-child { margin-bottom:0; }
.ci-icon { width:40px; height:40px; flex-shrink:0; border-radius:var(--r); background:var(--ac-dim); border:1px solid var(--ac-line); display:flex; align-items:center; justify-content:center; }
.ci-icon svg { width:18px; height:18px; fill:var(--ac); }
.ci-lbl { font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); margin-bottom:.14rem; }
.ci-val { font-size:.9rem; color:var(--cream-dim); }
.hrs-row { display:flex; justify-content:space-between; font-size:.84rem; padding:.38rem 0; border-bottom:1px solid rgba(70,130,180,.09); }
.hrs-row:last-of-type { border:none; }
.hrs-day  { color:var(--muted); }
.hrs-time { color:var(--cream); font-weight:600; }
.hrs-off  { color:var(--muted2); }
.form-ok  { display:none; text-align:center; padding:3rem 2rem; background:var(--card-bg); border:1px solid var(--ac-line); border-radius:var(--r); }

/* portfolio */
.filter-bar  { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:2.8rem; }
.filter-btn  { font-family:var(--fb); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:transparent; border:1px solid var(--ac-line); border-radius:100px; padding:.42rem .95rem; cursor:pointer; transition:color var(--t),border-color var(--t),background var(--t); }
.filter-btn:hover { color:var(--cream); border-color:var(--ac); }
.filter-btn.on { color:#fff; background:var(--ac); border-color:var(--ac); }

/* port card */
.port-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t2),border-color var(--t); }
.port-card:hover { transform:translateY(-5px); border-color:rgba(70,130,180,.42); }
.port-thumb { height:220px; position:relative; overflow:hidden; }
.port-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; display:block; }
.port-card:hover .port-thumb img { transform:scale(1.06); }
.port-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,9,14,.6) 0%,transparent 60%); }
.port-thumb-label { position:absolute; bottom:.9rem; left:.9rem; z-index:1; font-size:.67rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); background:rgba(7,9,14,.65); border:1px solid var(--ac-line); padding:.2rem .55rem; border-radius:4px; }
.port-body  { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.port-title { font-family:var(--fd); font-size:1.4rem; color:var(--cream); margin-bottom:.45rem; }
.port-desc  { font-size:.86rem; font-weight:300; color:var(--muted); line-height:1.7; flex:1; margin-bottom:1.1rem; }
.port-link  { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); transition:gap var(--t); }
.port-card:hover .port-link { gap:11px; }

/* proj detail */
.proj-meta-box { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r); padding:1.5rem; }
.proj-meta-hd  { font-family:var(--fd); font-size:1.1rem; color:var(--cream); letter-spacing:.06em; margin-bottom:1rem; }
.proj-meta-row { font-size:.82rem; color:var(--muted); margin-bottom:.65rem; }
.proj-meta-row strong { color:var(--cream); }

/* animations */
@keyframes up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.reveal   { opacity:0; transform:translateY(26px);  transition:opacity .65s var(--t2),transform .65s var(--t2); }
.reveal.on{ opacity:1; transform:none; }
.reveal-l { opacity:0; transform:translateX(-26px); transition:opacity .65s var(--t2),transform .65s var(--t2); }
.reveal-l.on{ opacity:1; transform:none; }
.reveal-r { opacity:0; transform:translateX(26px);  transition:opacity .65s var(--t2),transform .65s var(--t2); }
.reveal-r.on{ opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s}
@keyframes pdot { 0%,100%{box-shadow:0 0 0 3px rgba(70,130,180,.18)} 50%{box-shadow:0 0 0 8px rgba(70,130,180,.05)} }
.pdot { width:8px; height:8px; border-radius:50%; background:var(--ac); flex-shrink:0; animation:pdot 2s ease-in-out infinite; }

/* responsive */
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem} .stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(2,1fr)}
  .nav-links,.nav-cta{display:none} .nav-ham{display:flex}
  .two-col{grid-template-columns:1fr !important}
  .proj-grid{grid-template-columns:1fr !important}
  .reveal-l,.reveal-r{transform:translateY(26px) !important}
  .reveal-l.on,.reveal-r.on{transform:none !important}
}
@media(max-width:640px){
  :root{--gap:3.5rem}
  .navbar,.navbar.stuck{padding:.82rem 1.1rem}
  .wrap{padding:0 1rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat-num{font-size:2.5rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:.6rem}
  .cform-2col{grid-template-columns:1fr !important}
  .contact-grid{grid-template-columns:1fr !important}
  .cta-inner{flex-direction:column !important;text-align:center}
  .cta-inner .btn{width:100%;justify-content:center}
  .card{padding:1.35rem}
  .cform{padding:1.35rem}
}
@media(max-width:400px){.stats-row{grid-template-columns:1fr}}