/* Shared styles for every page (home + product pages). */
:root{
  --ink:#05496A;          /* dark sections, header — logo mid blue */
  --ink-deep:#00324B;     /* footer, deepest shade — logo corner */
  --steel:#17698C;        /* logo right edge */
  --steel-light:#4494B2;  /* logo highlight */
  --galv:#B8C4C8;         /* galvanized steel, from the lettering */
  --amber:#C98A1B;        /* accent: eyebrows, numbers, ticker */
  --amber-dark:#B07815;
  --whatsapp:#25D366;
  --cream:#EDF2F4;        /* cool light sections */
  --cream-soft:#F6F9FA;
  --bg-panel:#FFFFFF;
  --line:#D5E0E5;         /* dividers on light sections */
  --line-dark:rgba(255,255,255,.12); /* dividers on dark sections */
  --grey:#566A75;
  --grey-light:#9CA9B0;
  --on-dark:#F2F6F7;      /* headings on dark — bright steel */
  --on-dark-muted:#B5CAD4;/* body text on dark */
  --max:1200px;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);color:var(--ink);
  font-family:'Albert Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;color:var(--ink);line-height:1.08;letter-spacing:-.02em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

.eyebrow{font-family:'Plus Jakarta Sans';font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:18px;display:block;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;padding:13px 24px;border-radius:8px;border:none;white-space:nowrap;transition:background .15s,color .15s,transform .15s;}
/* galvanized-steel button, matching the logo lettering */
.btn-primary{background:linear-gradient(180deg,#F1F5F6 0%,#C9D3D7 48%,#A9B7BC 100%);color:var(--ink-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.12),0 2px 6px rgba(0,30,45,.25);}
.btn-primary:hover{background:linear-gradient(180deg,#FFFFFF 0%,#D8E0E3 48%,#B6C3C8 100%);}
.btn-sm{padding:9px 18px;font-size:14px;}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;color:var(--on-dark);}
.link-arrow .arr{transition:transform .15s;}
.link-arrow:hover .arr{transform:translateX(4px);}
.link-arrow.on-light{color:var(--ink);}

/* placeholders */
.ph{
  border:2px dashed var(--grey-light);
  background:repeating-linear-gradient(45deg,#F6F9FA,#F6F9FA 10px,#EAF0F2 10px,#EAF0F2 20px);
  border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--grey);gap:6px;padding:24px 16px;
}
.ph .ph-icon{font-size:28px;line-height:1;}
.ph .ph-label{font-size:14px;font-weight:600;color:var(--steel);}
.ph .ph-spec{font-size:12px;color:var(--grey-light);}
.ph-dark{border-color:rgba(255,255,255,.25);background:repeating-linear-gradient(45deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 10px,rgba(255,255,255,.07) 10px,rgba(255,255,255,.07) 20px);color:var(--on-dark-muted);}
.ph-dark .ph-label{color:var(--on-dark);}
.photo{border-radius:var(--radius);overflow:hidden;position:relative;}
.photo img{width:100%;height:100%;object-fit:cover;}
.photo .temp{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:3px 8px;border-radius:4px;}

/* header */
header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid var(--line-dark);}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:80px;gap:20px;}
.brand{display:flex;align-items:center;}
.brand img{height:62px;width:auto;}   /* original logo, blue background removed (brand/logo-web.png) */
.brand-lg img{height:150px;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{color:var(--on-dark-muted);font-size:15px;font-weight:500;transition:color .15s;}
.nav-links a:hover{color:#fff;}
.nav-right{display:flex;align-items:center;gap:12px;}
.i18n-pending body{visibility:hidden;}
.lang-switch{display:inline-flex;border:1px solid var(--line-dark);border-radius:999px;padding:3px;gap:2px;}
.lang-switch button{background:none;border:none;color:var(--on-dark-muted);font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;letter-spacing:.06em;padding:6px 11px;border-radius:999px;transition:background .15s,color .15s;}
.lang-switch button:hover{color:#fff;}
.lang-switch button.active{background:linear-gradient(180deg,#F1F5F6,#B8C4C8);color:var(--ink-deep);}
.menu-toggle{display:none;background:none;border:1px solid var(--line-dark);border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;color:#fff;}
.menu-toggle svg{width:22px;height:22px;}
.mobile-nav{display:none;}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 95% at 88% 0%,#3D8DAE 0%,#17698C 22%,var(--ink) 55%,#033D59 100%);color:#fff;padding:120px 0 110px;}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;}
.scaffold{display:block;width:100%;height:auto;max-height:560px;pointer-events:none;overflow:visible;}
.hero-inner{position:relative;z-index:1;}
.hero h1{font-size:clamp(42px,6.2vw,80px);font-weight:700;color:var(--on-dark);margin-bottom:26px;letter-spacing:-.035em;}
.hero .lead{color:var(--on-dark-muted);font-size:clamp(17px,1.6vw,20px);max-width:60ch;margin-bottom:38px;}
.hero .lead p+p{margin-top:12px;}
.hero-ctas{display:flex;gap:28px;align-items:center;flex-wrap:wrap;}

/* stats band ("in good company" equivalent) */
.stats-band{background:var(--cream);padding:64px 0;border-bottom:1px solid var(--line);}
.stats-band .eyebrow{color:var(--steel);text-align:center;}
.stats-band h2{text-align:center;font-size:clamp(24px,3vw,34px);font-weight:600;max-width:30ch;margin:0 auto 44px;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{text-align:center;padding:8px 12px;}
.stat .n{font-family:'Plus Jakarta Sans';font-size:52px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;}
.stat .l{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:10px;}

/* section framing */
section{padding:110px 0;}
.sec-head{max-width:820px;margin-bottom:56px;}
.sec-head h2{font-size:clamp(32px,4.4vw,54px);margin-bottom:18px;}
.sec-head p{color:var(--grey);font-size:18px;max-width:62ch;}
.dark{background:var(--ink);color:#fff;}
.dark h2,.dark h3,.dark h4{color:var(--on-dark);}
.dark .sec-head p,.dark p{color:var(--on-dark-muted);}
.cream-soft{background:var(--cream-soft);}

/* three categories — "three stages" cards */
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.stage{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column;}
.stage .snum{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:700;color:var(--amber);margin-bottom:22px;}
.stage h3{font-size:26px;margin-bottom:12px;}
.stage > p{color:var(--grey);font-size:16px;margin-bottom:24px;}
.stage .k{font-family:'Plus Jakarta Sans';font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin:18px 0 6px;padding-top:18px;border-top:1px solid var(--line);}
.stage .v{font-size:15px;color:var(--ink);}
.stage .link-arrow{margin-top:auto;padding-top:26px;}

/* how we work — 2x2 feature grid on dark */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;}
.feat{background:var(--ink);padding:38px 34px;}
.feat .fnum{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:700;color:var(--amber);margin-bottom:16px;}
.feat h3{font-size:24px;margin-bottom:10px;}
.feat p{font-size:16px;}
/* about: intro, six numbered blocks, closing + CTA */
.about-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;margin-bottom:56px;}
.about-intro h2{font-size:clamp(30px,3.8vw,48px);}
.about-copy p{font-size:17.5px;margin-bottom:16px;max-width:62ch;}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;}
.pillar-card{background:var(--ink);padding:34px 30px;transition:background .3s;}
.pillar-card:hover{background:#0A5579;}
.pillar-card .fnum{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:700;color:var(--amber);margin-bottom:14px;}
.pillar-card h3{font-size:21px;margin-bottom:10px;}
.pillar-card p{font-size:15.5px;line-height:1.65;}
.about-close .motto{font-family:'Plus Jakarta Sans';font-weight:700;font-size:clamp(20px,2.2vw,26px);color:var(--galv);line-height:1.3;margin-bottom:26px;}
.about-close h3{font-size:24px;margin-bottom:10px;}
.about-close .hero-ctas{margin-top:22px;}
.about-more{margin-top:28px;}
.pillar-grid.compact .pillar-card{padding:28px 26px;}
.page-hero{padding:56px 0 64px;color:#fff;background:radial-gradient(120% 95% at 88% 0%,#3D8DAE 0%,#17698C 22%,var(--ink) 55%,#033D59 100%);}
.page-hero .about-copy p{color:var(--on-dark-muted);}
.about-page{border-top:1px solid var(--line-dark);}
.page-hero .about-intro{margin-bottom:0;}
.page-hero h1{color:var(--on-dark);font-size:clamp(32px,4.2vw,54px);}
.page-hero .crumbs{font-size:14px;color:var(--on-dark-muted);margin-bottom:22px;display:flex;gap:8px;}
.page-hero .crumbs a:hover{color:#fff;}
.page-hero .crumbs .sep{opacity:.5;}
.about-page{padding-top:80px;}
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:72px;}
.about-split p{margin-bottom:16px;font-size:17px;}
.about-split .photo{height:380px;}

/* product detail */
.product{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line);}
.product:nth-child(even) .gallery{order:2;}
.gallery .main{height:380px;}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px;}
.thumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;height:72px;background:none;opacity:.65;transition:opacity .2s,border-color .2s,transform .2s;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb:hover{opacity:1;transform:translateY(-2px);}
.thumb.active{opacity:1;border-color:var(--amber);}
.gallery .main img{transition:opacity .35s,transform 1.2s cubic-bezier(.2,.7,.2,1);}
.gallery .main img.swap{opacity:0;}
.stage-img{position:relative;margin:-34px -30px 26px;height:190px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.stage-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.stage:hover .stage-img img{transform:scale(1.06);}
.stage-img .temp{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;padding:2px 7px;border-radius:4px;}
.tag{display:inline-block;font-family:'Plus Jakarta Sans';font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--steel);background:#DDEBF1;padding:5px 12px;border-radius:999px;margin-bottom:16px;}
.product h3{font-size:clamp(28px,3vw,38px);margin-bottom:14px;}
.product p{color:var(--grey);font-size:16.5px;margin-bottom:22px;max-width:52ch;}
.spec-table{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:24px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:11px 0;}
.spec-table td:first-child{color:var(--grey);width:42%;}
.spec-table td:last-child{font-weight:600;}
.doc-link{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans';font-size:14px;font-weight:700;color:#fff;background:var(--steel);padding:11px 18px;border-radius:8px;}
.doc-link:hover{background:var(--steel-light);}

/* references — "results in numbers" cards */
.ref-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ref-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.ref-card .ph{border-radius:0;border-width:0 0 2px 0;height:190px;}
.ref-body{padding:26px 26px 30px;}
.ref-card .big{font-family:'Plus Jakarta Sans';font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:10px;color:var(--ink);}
.ref-card .meta{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:12px;}
.ref-card h4{font-size:19px;margin-bottom:6px;}
.ref-card p{font-size:15px;color:var(--grey);}
.ref-card.proj{border-top:3px solid var(--amber);}
.ref-card.proj .big{font-size:30px;margin-bottom:12px;}
.ref-card.proj h4{font-size:17px;line-height:1.35;}
.proj-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.proj-chip{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:14px 16px;transition:transform .3s,box-shadow .3s;}
.proj-chip:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(5,46,68,.1);}
.proj-chip .pc{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);}
.proj-chip .pn{font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;color:var(--ink);line-height:1.35;}

/* certifications — "compliance, handled" */
.cert-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.cert-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cert-item .ph{aspect-ratio:1/1;}
.cert-item .cap{font-size:13px;color:var(--on-dark-muted);margin-top:8px;text-align:center;}
.ph-video{height:300px;margin-top:20px;}

/* CTA band */
.cta-band{background:var(--cream);padding:90px 0;}
.cta-box{background:var(--ink);border-radius:24px;padding:64px 56px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden;}
.cta-box h2{color:var(--on-dark);font-size:clamp(28px,3.4vw,42px);}
.cta-box .actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;justify-self:end;}

/* RFQ form */
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;}
.contact-line{display:flex;gap:12px;align-items:center;font-size:16px;color:var(--on-dark);padding:16px 0;border-top:1px solid var(--line-dark);}
.contact-line:last-child{border-bottom:1px solid var(--line-dark);}
form{display:grid;gap:16px;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--radius);padding:32px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{font-size:13px;color:var(--on-dark-muted);display:block;margin-bottom:6px;font-weight:600;}
input,select,textarea{width:100%;background:rgba(3,31,47,.6);border:1px solid rgba(255,255,255,.16);color:#fff;padding:12px 14px;border-radius:8px;font-family:inherit;font-size:15px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);}
select option{color:var(--ink);}
textarea{resize:vertical;min-height:110px;}
.submit-row{display:flex;align-items:center;gap:16px;margin-top:4px;flex-wrap:wrap;}
.inco-fixed{background:rgba(3,31,47,.35);border:1px dashed rgba(255,255,255,.22);color:#fff;padding:12px 14px;border-radius:8px;font-size:15px;font-weight:600;}
.inco-note{font-size:12.5px;line-height:1.55;color:var(--grey-light);margin:-4px 0 0;}
.form-hint{font-size:12.5px;color:var(--grey-light);}

/* footer */
footer{background:var(--ink-deep);color:var(--on-dark-muted);padding:64px 0 100px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}
footer h4{color:var(--on-dark);font-size:15px;margin-bottom:14px;}
footer ul{list-style:none;}
footer li{margin-bottom:9px;font-size:15px;}
footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:20px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- motion ---------- */
/* scaffolding build: tubes draw in, boards slide on, couplers pop, then the hoist keeps working */
.sc-tube{fill:none;stroke:var(--galv);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:sc-draw .6s var(--d) cubic-bezier(.4,0,.2,1) forwards;}
.sc-ledger{stroke-width:4;}
.sc-rail{stroke-width:2.5;stroke:#8FA6AF;}
.sc-brace{stroke-width:3;stroke:#9DB0B7;}
.sc-rope{stroke-width:1.5;stroke:#A9BCC7;}
@keyframes sc-draw{to{stroke-dashoffset:0;}}
.sc-plate{fill:#8FA6AF;}
.sc-toe{opacity:0;transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);animation:sc-board .45s var(--d) cubic-bezier(.2,.7,.2,1) forwards;}
.sc-toe-board{fill:#D9A03A;stroke:#8C6420;stroke-width:1;}
.sc-toe-text{fill:#00324B;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:2.5px;}
.sc-board{fill:#B98A3E;opacity:0;transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:sc-board .45s var(--d) cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes sc-board{to{opacity:.9;transform:none;}}
.sc-joint{fill:#F2F6F7;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:sc-pop .3s var(--d) forwards,sc-glint 3.2s calc(var(--d) + 3s) ease-in-out infinite;}
@keyframes sc-pop{to{opacity:1;transform:none;}}
@keyframes sc-glint{0%,100%{opacity:1;}50%{opacity:.35;}}
.sc-crate{fill:#C98A1B;stroke:#F2F6F7;stroke-width:1.5;opacity:0;animation:sc-pop .3s var(--d) forwards,sc-hoist 8s calc(var(--d) + .3s) ease-in-out infinite;}
@keyframes sc-hoist{0%,8%{transform:translateY(0);}46%,58%{transform:translateY(-460px);}96%,100%{transform:translateY(0);}}
.sc-beacon{fill:#C98A1B;opacity:0;animation:sc-pop .3s var(--d) forwards,sc-blink 1.2s calc(var(--d) + .3s) steps(1) infinite;}
.sc-halo{fill:#C98A1B;opacity:0;animation:sc-halo 1.2s var(--d) steps(1) infinite;}
@keyframes sc-blink{0%{opacity:1;}50%{opacity:.25;}}
@keyframes sc-halo{0%{opacity:.28;}50%{opacity:0;}}
.hero-glow{position:absolute;width:620px;height:620px;right:-140px;top:-220px;border-radius:50%;background:radial-gradient(circle,rgba(30,112,153,.45),transparent 65%);filter:blur(10px);animation:drift 14s ease-in-out infinite alternate;pointer-events:none;}
@keyframes drift{to{transform:translate(-180px,140px) scale(1.15);}}
.hero-inner > *{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;}
.hero-inner > :nth-child(2){animation-delay:.12s;}
.hero-inner > :nth-child(3){animation-delay:.26s;}
.hero-inner > :nth-child(4){animation-delay:.4s;}
@keyframes rise{to{opacity:1;transform:none;}}

.ticker{background:var(--amber);color:var(--ink);overflow:hidden;padding:16px 0;white-space:nowrap;}
.ticker-track{display:inline-flex;align-items:center;gap:28px;animation:marquee 38s linear infinite;font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;}
.ticker-track i{font-style:normal;opacity:.55;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(0,30,45,.35),0 0 0 1px rgba(255,255,255,.25);}
.stage,.ref-card{transition:transform .3s,box-shadow .3s,border-color .3s;}
.stage:hover,.ref-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(5,46,68,.12);border-color:#B8C9D1;}
.feat{transition:background .3s;}
.feat:hover{background:#0A5579;}
.photo img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.photo:hover img{transform:scale(1.05);}
header{transition:box-shadow .3s;}
header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.25);}
.wa-float{animation:wa-pulse 2.8s ease-out infinite;}
@keyframes wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 6px 18px rgba(0,0,0,.28);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.28);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.28);}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .hero-inner > *,.reveal{opacity:1;transform:none;}
  .sc-tube{stroke-dashoffset:0;}
  .sc-board,.sc-toe,.sc-joint,.sc-crate,.sc-beacon{opacity:1;transform:none;}
}

/* WhatsApp floating button — present on every section since this is one scrolling page */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:100;width:58px;height:58px;border-radius:50%;background:var(--whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);}
.wa-float svg{width:30px;height:30px;}

@media(max-width:960px){
  .nav-links,.nav-right .btn{display:none;}
  .hero-grid{position:static;grid-template-columns:1fr;}
  .scaffold{position:absolute;opacity:.2;width:auto;max-height:none;bottom:0;height:80%;right:-60px;}
  .menu-toggle{display:inline-flex;}
  .mobile-nav{display:none;flex-direction:column;background:var(--ink);border-top:1px solid var(--line-dark);padding:8px 28px 24px;}
  .mobile-nav.open{display:flex;}
  .mobile-nav a{color:var(--on-dark);font-size:17px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line-dark);}
  .mobile-nav .btn{margin-top:18px;justify-content:center;border-bottom:none;color:var(--ink);}
  .stage-grid,.ref-grid{grid-template-columns:1fr;}
  .feat-grid{grid-template-columns:1fr;}
  .about-intro{grid-template-columns:1fr;gap:20px;margin-bottom:40px;}
  .pillar-grid{grid-template-columns:1fr 1fr;}
  .about-split,.product,.cert-split,.quote-grid,.footer-grid,.cta-box{grid-template-columns:1fr;}
  .product:nth-child(even) .gallery{order:0;}
  .cta-box .actions{justify-self:start;}
  .stat-row{grid-template-columns:repeat(2,1fr);row-gap:36px;}
}
@media(max-width:600px){
  .wrap{padding:0 20px;}
  section{padding:76px 0;}
  .hero{padding:80px 0 76px;}
  .gallery .main,.about-split .photo{height:260px;}
  .pillar-grid{grid-template-columns:1fr;}
  .pillar-card{padding:26px 22px;}
  .thumb{height:54px;}
  .thumbs{gap:6px;}
  .form-row{grid-template-columns:1fr;}
  form{padding:22px;}
  .cta-box{padding:40px 26px;border-radius:18px;}
  .stat .n{font-size:42px;}
  .wa-float{width:52px;height:52px;bottom:16px;right:16px;}
  .brand img{height:54px;}
}

/* current page in the menu */
.nav-links a.active{color:#fff;box-shadow:inset 0 -2px 0 var(--amber);padding-bottom:4px;}
.mobile-nav a.active{color:#fff;font-weight:700;}
.page-hero .lead{color:var(--on-dark-muted);font-size:18px;max-width:64ch;margin-top:14px;}
.spec-card .note-dark{color:var(--grey);font-size:15px;}

/* header dropdown (reusable: wrap a menu link in .nav-dd[data-dd]) */
.nav-dd{position:relative;display:flex;align-items:center;gap:2px;}
.nav-dd-toggle{background:none;border:none;color:var(--on-dark-muted);width:22px;height:22px;display:grid;place-items:center;padding:0;border-radius:4px;}
.nav-dd-toggle svg{width:12px;height:12px;transition:transform .2s;}
.nav-dd.open .nav-dd-toggle svg{transform:rotate(180deg);}
.nav-dd:hover .nav-dd-toggle,.nav-dd.open .nav-dd-toggle{color:#fff;}
/* panel colors: change --dd-bg / --dd-hover to restyle every dropdown */
.nav-dd{--dd-bg:#FFFFFF;--dd-hover:var(--cream);}
.nav-dd-panel{position:absolute;top:100%;left:-24px;min-width:380px;padding:14px 10px 10px;margin-top:14px;
  background:var(--dd-bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 50px rgba(0,20,32,.28);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:80;}
.nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;} /* hover bridge over the gap */
.nav-dd.open .nav-dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s;}
.dd-item{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:8px;transition:background .15s;}
.nav-links .dd-item{color:var(--ink);}
.dd-item:hover,.dd-item:focus-visible{background:var(--dd-hover);}
.dd-ic{flex:0 0 26px;height:26px;color:var(--steel);transition:color .15s;}
.dd-ic svg{width:26px;height:26px;}
.dd-item:hover .dd-ic,.dd-item:focus-visible .dd-ic{color:var(--amber);}
.dd-txt{display:flex;flex-direction:column;gap:2px;}
.dd-txt strong{font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;color:var(--ink);}
.dd-item:hover strong{color:var(--amber-dark);}
.dd-txt small{font-size:13px;color:var(--grey);font-weight:400;}
.nav-links .dd-all{display:block;margin:6px 14px 4px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--grey);}
.nav-links .dd-all:hover{color:var(--amber-dark);}
.nav-dd-link.active{color:#fff;}
/* mobile accordion */
.m-dd-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-dark);}
.mobile-nav .m-dd-row a{border-bottom:none;flex:1;}
.m-dd-toggle{background:none;border:1px solid var(--line-dark);border-radius:8px;width:40px;height:36px;color:#fff;display:grid;place-items:center;}
.m-dd-toggle svg{width:14px;height:14px;transition:transform .2s;}
.m-dd.open .m-dd-toggle svg{transform:rotate(180deg);}
.m-dd-list{display:flex;flex-direction:column;padding:4px 0 8px 14px;border-bottom:1px solid var(--line-dark);}
.m-dd-list[hidden]{display:none;}
.mobile-nav .m-dd-list a{font-size:15.5px;padding:10px 0;border-bottom:none;color:var(--on-dark-muted);}

[id]{scroll-margin-top:96px;}

/* WhatsApp button: same shape as the primary button, WhatsApp green, white text.
   Placed under "Request a Quote" at the same width wherever the two appear together. */
.btn-whatsapp{background:var(--whatsapp);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(0,30,45,.25);}
.btn-whatsapp:hover{background:#1EBE5A;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,30,45,.35);}
.btn-whatsapp svg{width:19px;height:19px;flex:0 0 19px;}
.cta-box .actions,.hero-ctas:has(.btn-whatsapp){flex-direction:column;align-items:stretch;gap:12px;width:260px;max-width:100%;}
.cta-box .actions .btn,.hero-ctas:has(.btn-whatsapp) .btn{justify-content:center;width:100%;}
.contact-cta{margin-top:22px;max-width:260px;}
.contact-cta .btn{width:100%;justify-content:center;}
@media(max-width:600px){.cta-box .actions,.hero-ctas:has(.btn-whatsapp){width:100%;}}

.gallery .door-main{background:#fff;}
.gallery .door-main img{object-fit:contain;}
.stage-img.door-card{background:#fff;}
.stage-img.door-card img{object-fit:cover;object-position:center 40%;}

/* whole card clickable: the card's own link (or .card-link) stretches over it */
.stage,.linked{position:relative;}
.stage .link-arrow::after,.card-link{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;}
.stage,.linked{cursor:pointer;}
.linked:hover{outline:1px solid var(--amber);outline-offset:-1px;}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.process{background:var(--cream-soft);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0;}
.step-img{height:180px;overflow:hidden;background:var(--ink);}
.step-img img{width:100%;height:100%;object-fit:cover;}
.step-card figcaption{padding:18px 20px 22px;}
.step-card .fnum{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--amber);}
.step-card h3{font-size:19px;margin:6px 0 6px;}
.step-card p{font-size:14.5px;color:var(--grey);}
@media(max-width:960px){.process-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.process-grid{grid-template-columns:1fr;}}
.ref-card.proj .ref-photo{height:200px;overflow:hidden;background:var(--cream-soft);}
.ref-card.proj .ref-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.ref-card.proj:hover .ref-photo img{transform:scale(1.05);}
.ref-card .credit{font-size:11px;color:var(--grey-light);margin-top:12px;}
.ref-card .credit a:hover{text-decoration:underline;}

/* page hero art: small looping SVG scenes on About, Products, References, Contact */
.hero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;}
.hs-svg{display:block;width:100%;height:auto;overflow:visible;}
.hs-art{max-width:480px;justify-self:end;width:100%;}
.art-about{margin:0 0 0 auto;max-width:460px;}
.page-hero .about-intro{grid-template-columns:1.1fr .9fr;}
.page-hero .about-intro .about-copy{margin-top:26px;}
/* about: factory -> containers -> ship */
.ha-ground,.ha-route{stroke:var(--galv);stroke-width:2;opacity:.5;}
.ha-route{stroke-dasharray:4 6;animation:ha-dash 1s linear infinite;}
@keyframes ha-dash{to{stroke-dashoffset:-10;}}
.ha-sea{fill:none;stroke:#5FA4C4;stroke-width:2.5;animation:ha-wave 2.4s ease-in-out infinite;}
@keyframes ha-wave{50%{transform:translateX(-10px);}}
.ha-factory{fill:#0B5B80;stroke:var(--galv);stroke-width:2;}
.ha-smoke{fill:#B8C4C8;opacity:0;transform-box:fill-box;transform-origin:center;animation:ha-smoke 3.6s ease-out infinite;}
.ha-smoke.s2{animation-delay:1.2s;}.ha-smoke.s3{animation-delay:2.4s;}
@keyframes ha-smoke{0%{opacity:.6;transform:translate(0,0) scale(.6);}100%{opacity:0;transform:translate(26px,-50px) scale(2);}}
.ha-box{fill:var(--amber);stroke:#F2F6F7;stroke-width:1;animation:ha-box 4.5s linear infinite;}
.ha-box.b2{animation-delay:-1.5s;}.ha-box.b3{animation-delay:-3s;}
@keyframes ha-box{0%{opacity:0;transform:translateX(0);}8%{opacity:1;}80%{opacity:1;transform:translateX(150px);}100%{opacity:0;transform:translateX(150px) translateY(-20px);}}
.ha-crane line{stroke:var(--galv);stroke-width:4;stroke-linecap:round;}
.ha-crane .ha-cable{stroke-width:1.5;transform-box:fill-box;transform-origin:top;animation:ha-cable 4.5s ease-in-out infinite;}
@keyframes ha-cable{50%{transform:scaleY(.55);}}
.ha-ship{fill:#0B5B80;stroke:var(--galv);stroke-width:1.5;animation:ha-bob 3s ease-in-out infinite;}
.ha-ship rect{fill:var(--amber);stroke:#00324B;}
@keyframes ha-bob{50%{transform:translateY(3px);}}
/* products: scaffold builds, door swings, panels slide in */
.hp-scaf line{stroke:var(--galv);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;animation:hp-draw 6s var(--d) cubic-bezier(.4,0,.2,1) infinite both;}
.hp-scaf line.br{stroke:#9DB0B7;stroke-width:3;}
@keyframes hp-draw{0%{stroke-dashoffset:1;}12%,85%{stroke-dashoffset:0;}100%{stroke-dashoffset:1;}}
.hp-board{fill:#B98A3E;transform-box:fill-box;transform-origin:left;animation:hp-board 6s var(--d) infinite both;}
@keyframes hp-board{0%{transform:scaleX(0);}8%,85%{transform:none;}100%{transform:scaleX(0);}}
.hp-door .frame{fill:#033D59;stroke:var(--galv);stroke-width:3;}
.hp-door .leaf rect{fill:#17698C;stroke:#B8C4C8;stroke-width:1.5;}
.hp-door .leaf .pan{fill:none;stroke:#8FB3C4;}
.hp-door .leaf .knob{fill:var(--amber);stroke:none;}
.hp-door .leaf{transform-box:fill-box;transform-origin:left;animation:hp-swing 6s ease-in-out infinite;}
@keyframes hp-swing{0%,20%{transform:none;}45%,65%{transform:scaleX(.38) skewY(-6deg);}90%,100%{transform:none;}}
.hp-panels rect{fill:#B98A3E;stroke:#7A5826;stroke-width:1;transform-box:fill-box;transform-origin:bottom;animation:hp-panel 6s calc(var(--i) * .15s + .4s) cubic-bezier(.2,.7,.2,1) infinite both;}
.hp-panels rect:nth-child(even){fill:#1E2A30;stroke:#0E171B;}
@keyframes hp-panel{0%{transform:scaleY(0);opacity:0;}10%,85%{transform:none;opacity:1;}100%{transform:scaleY(0);opacity:0;}}
/* references: routes from Turkey to the project countries */
.hr-grid{fill:url(#hr-dots);}
#hr-dots circle{fill:rgba(184,196,200,.22);}
.hr-arc{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;animation:hr-arc 5s calc(var(--i) * .35s) ease-in-out infinite both;}
@keyframes hr-arc{0%{stroke-dashoffset:1;}30%,80%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.hr-pin circle{fill:var(--galv);}
.hr-pin.home circle{fill:var(--amber);}
.hr-pin .halo{fill:none;stroke:var(--amber);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:hr-halo 2.4s calc(var(--i) * .35s) ease-out infinite;}
@keyframes hr-halo{0%{transform:scale(.4);opacity:.9;}100%{transform:scale(2.2);opacity:0;}}
.hr-pin text{fill:#DDE8EE;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-anchor:middle;}
/* contact: paper plane flies into the inbox, a chat reply is typing */
.hc-trail{fill:none;stroke:var(--galv);stroke-width:2;stroke-dasharray:3 8;opacity:.45;}
.hc-plane{fill:#F2F6F7;offset-path:path("M40 190 C 120 60, 240 220, 330 90");offset-rotate:auto;animation:hc-fly 4.2s ease-in-out infinite;}
.hc-plane .fold{fill:#B8C4C8;}
@keyframes hc-fly{0%{offset-distance:0%;opacity:0;}10%{opacity:1;}85%{offset-distance:100%;opacity:1;}100%{offset-distance:100%;opacity:0;}}
.hc-env rect{fill:#0B5B80;stroke:var(--galv);stroke-width:2;}
.hc-env path{fill:none;stroke:var(--galv);stroke-width:2;}
.hc-env{transform-box:fill-box;transform-origin:center;animation:hc-ping 4.2s ease-in-out infinite;}
@keyframes hc-ping{0%,84%{transform:none;}90%{transform:scale(1.08);}96%,100%{transform:none;}}
.hc-chat .b1{fill:#25D366;opacity:.9;transform-box:fill-box;transform-origin:left bottom;animation:hc-pop 4.2s 1s infinite both;}
.hc-chat .b2 rect{fill:#F2F6F7;}
.hc-chat .b2{transform-box:fill-box;transform-origin:right bottom;animation:hc-pop 4.2s 1.6s infinite both;}
.hc-chat .dot{fill:#566A75;animation:hc-dot 1s ease-in-out infinite;}
.hc-chat .d2{animation-delay:.15s;}.hc-chat .d3{animation-delay:.3s;}
@keyframes hc-pop{0%{transform:scale(0);opacity:0;}10%,80%{transform:none;opacity:1;}95%,100%{transform:scale(0);opacity:0;}}
@keyframes hc-dot{50%{transform:translateY(-4px);}}
@media(max-width:960px){
  .hero-split{grid-template-columns:1fr;gap:28px;}
  .hs-art{justify-self:center;max-width:380px;}
  .art-about{margin:24px auto 0;}
  .page-hero .about-intro{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .hs-art *{animation:none !important;}
  .hc-plane{offset-distance:60%;}
}

/* category hero art (tools/hero-art.js): scaffolding, steel doors, wooden paneling */
.hs-art.cat-art{max-width:500px;}
/* scaffolding: built up level by level, then taken down */
.hk-ground{stroke:var(--galv);stroke-width:2;opacity:.45;}
.hk-plate{fill:#8FA6AF;}
.hk-tube{fill:none;stroke:var(--galv);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;animation:hk-draw 9s var(--d) cubic-bezier(.4,0,.2,1) infinite both;}
.hk-tube.ledger{stroke-width:4;}
.hk-tube.brace{stroke:#9DB0B7;stroke-width:3;}
@keyframes hk-draw{0%{stroke-dashoffset:1;opacity:1;}6%{stroke-dashoffset:0;}70%{stroke-dashoffset:0;opacity:1;}78%,100%{stroke-dashoffset:0;opacity:0;}}
.hk-board{fill:#B98A3E;transform-box:fill-box;transform-origin:left;animation:hk-board 9s var(--d) cubic-bezier(.2,.7,.2,1) infinite both;}
@keyframes hk-board{0%{transform:scaleX(0);opacity:1;}5%{transform:none;}70%{opacity:1;}78%,100%{transform:none;opacity:0;}}
.hk-hoist .rope{stroke:#A9BCC7;stroke-width:1.5;}
.hk-hoist .crate{fill:var(--amber);stroke:#F2F6F7;stroke-width:1.5;}
.hk-hoist{animation:hk-hoist 9s var(--d) ease-in-out infinite both;}
.hk-hoist .crate{animation:hk-lift 9s var(--d) ease-in-out infinite both;}
.hk-hoist .rope{transform-box:fill-box;transform-origin:top;animation:hk-rope 9s var(--d) ease-in-out infinite both;}
@keyframes hk-hoist{0%{opacity:0;}3%,60%{opacity:1;}70%,100%{opacity:0;}}
@keyframes hk-lift{0%,8%{transform:none;}40%,60%{transform:translateY(-190px);}}
@keyframes hk-rope{0%,8%{transform:none;}40%,60%{transform:scaleY(.08);}}
/* steel door: bolts shoot into the frame, handle turns, locked badge */
.hd-frame{fill:#033D59;stroke:var(--galv);stroke-width:4;}
.hd-glow{fill:none;stroke:var(--amber);stroke-width:3;opacity:0;animation:hd-glow 5s ease-in-out infinite;}
.hd-leaf{fill:#17698C;stroke:#B8C4C8;stroke-width:1.5;}
.hd-pan{fill:none;stroke:#8FB3C4;stroke-width:1.5;}
.hd-hinge{fill:#B8C4C8;}
.hd-plate{fill:#0B5B80;stroke:#B8C4C8;stroke-width:1;}
.hd-cyl{fill:var(--amber);}
.hd-handle{fill:#D9E2E6;transform-box:fill-box;transform-origin:14px 3.5px;animation:hd-handle 5s ease-in-out infinite;}
.hd-bolt{fill:var(--amber);stroke:#8C6420;stroke-width:1;animation:5s ease-in-out infinite;}
.hd-bolt.r{animation-name:hd-r;}.hd-bolt.t{animation-name:hd-t;}.hd-bolt.b{animation-name:hd-b;}
@keyframes hd-r{0%,22%{transform:translateX(-16px);}32%,72%{transform:none;}82%,100%{transform:translateX(-16px);}}
@keyframes hd-t{0%,22%{transform:translateY(14px);}32%,72%{transform:none;}82%,100%{transform:translateY(14px);}}
@keyframes hd-b{0%,22%{transform:translateY(-14px);}32%,72%{transform:none;}82%,100%{transform:translateY(-14px);}}
@keyframes hd-handle{0%,12%{transform:none;}20%,26%{transform:rotate(28deg);}32%,100%{transform:none;}}
@keyframes hd-glow{0%,30%{opacity:0;}38%,68%{opacity:.85;}78%,100%{opacity:0;}}
.hd-badge circle{fill:rgba(255,255,255,.06);stroke:var(--amber);stroke-width:2.5;}
.hd-badge path{fill:none;stroke:var(--amber);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
.hd-badge{transform-box:fill-box;transform-origin:center;animation:hd-badge 5s ease-in-out infinite;}
@keyframes hd-badge{0%,30%{opacity:0;transform:scale(.6);}38%,70%{opacity:1;transform:none;}78%,100%{opacity:0;transform:scale(.6);}}
/* wooden paneling: slats are fitted one by one, light strips come on, the wood tone changes */
.hw-wall{fill:#0B4A68;stroke:rgba(184,196,200,.35);stroke-width:1.5;}
.hw-felt{fill:#1C262B;}
.hw-floor{stroke:var(--galv);stroke-width:2;opacity:.45;}
.hw-slat{fill:#B98A3E;stroke:rgba(0,0,0,.25);stroke-width:1;animation:hw-fit 12s calc(var(--i) * .18s) cubic-bezier(.2,.7,.2,1) infinite both,hw-tone 12s calc(var(--i) * .18s) linear infinite both;}
@keyframes hw-fit{0%{transform:translateY(-60px);opacity:0;}6%{transform:none;opacity:1;}88%{transform:none;opacity:1;}96%,100%{transform:translateY(40px);opacity:0;}}
@keyframes hw-tone{0%,28%{fill:#B98A3E;}34%,56%{fill:#6E4528;}62%,84%{fill:#3B4449;}92%,100%{fill:#B98A3E;}}
.hw-led{stroke:#FFE7B0;stroke-width:3;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 6px #FFC86B);animation:hw-led 12s infinite;}
@keyframes hw-led{0%,16%{opacity:0;}22%,84%{opacity:1;}90%,100%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .hd-bolt{transform:none;}
  .hd-glow,.hd-badge,.hw-led{opacity:1;}
}

/* home: reference projects carousel, moves right to left, arrows + dots below */
.proj-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 12px;}
.proj-row::-webkit-scrollbar{display:none;}
.proj-row .proj-card{scroll-snap-align:start;}
.proj-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:22px;}
.pn-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s;}
.pn-btn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.pn-btn:hover{border-color:var(--amber);}
.pn-dots{display:flex;gap:10px;}
.pn-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#B8C4C8;cursor:pointer;transition:background .2s,transform .2s;}
.pn-dots button.on{background:var(--amber);transform:scale(1.25);}
.proj-card{flex:none;width:290px;background:#fff;border:1px solid var(--line);border-bottom:3px solid var(--amber);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(5,46,68,.12);}
.proj-img{display:block;height:170px;overflow:hidden;background:var(--cream-soft);}
.proj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.proj-card:hover .proj-img img{transform:scale(1.06);}
.proj-txt{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;}
.proj-card .pc{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);}
.proj-card .pn{font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;color:var(--ink);line-height:1.35;}
.proj-credit{font-size:12px;color:var(--grey-light);margin-top:14px;}
.proj-credit a{text-decoration:underline;}
@media(prefers-reduced-motion:reduce){.proj-row{scroll-behavior:auto;}}

/* image lightbox (assets/site.js) */
.zoomable{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(2,20,30,.92);display:none;align-items:center;justify-content:center;padding:56px 70px;}
.lightbox.open{display:flex;}
html.lb-lock{overflow:hidden;}
.lightbox{overflow:hidden;}
.lb-blur{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:blur(40px) brightness(.45) saturate(1.1);pointer-events:none;}
.lb-close,.lb-nav{z-index:2;}
.lb-fig{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%;}
.lb-fig img{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.45);}
.lb-fig figcaption{color:#E8EFF2;font-family:'Plus Jakarta Sans';font-weight:600;font-size:15px;text-align:center;}
.lb-close{position:absolute;top:16px;right:20px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1;cursor:pointer;}
.lb-prev{left:14px;}.lb-next{right:14px;}
.lb-close:hover,.lb-nav:hover{background:var(--amber);}
@media(max-width:640px){.lightbox{padding:60px 12px;}.lb-nav{top:auto;bottom:14px;transform:none;}}

/* home hero scene captions */
.hero-grid:has(.port-scene){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;}
.hero-scene .port-scene{max-height:none;margin-right:-28px;width:calc(100% + 28px);}
.hero-scene{position:relative;}
.scene-cap{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.scene-cap span{font-family:'Plus Jakarta Sans';font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-muted);padding:6px 12px;border-radius:999px;border:1px solid var(--line-dark);transition:all .4s;}
.scene-cap span.on{color:var(--ink);background:var(--amber);border-color:var(--amber);}
@media(max-width:960px){.hero-scene{position:static;}.scene-cap{display:none;}.hero-grid:has(.port-scene){grid-template-columns:1fr;}.hero-scene .port-scene{margin-right:0;width:auto;}}

/* home hero: factory to port (tools/hero-port.js) - one 14 s loop
   0-40 %  goods leave the factory on the conveyor into the container
   40-62 % the quay crane lifts the container onto the ship
   62-90 % the ship sails off, then everything resets */
.port-scene,.hero-scene{--T:14s;}
.pt-quay{fill:#0A4762;}
.pt-sea{fill:#0B5B80;opacity:.75;}
.pt-wave{fill:none;stroke:#5FA4C4;stroke-width:2;opacity:.6;animation:pt-wave 3s ease-in-out infinite;}
.pt-wave.w1{animation-delay:-1s;opacity:.4;}.pt-wave.w2{animation-delay:-2s;opacity:.25;}
@keyframes pt-wave{50%{transform:translateX(-14px);}}
.pt-wall{fill:#0E5A7E;stroke:var(--galv);stroke-width:2;stroke-linejoin:round;}
.pt-chimney{fill:#0E5A7E;stroke:var(--galv);stroke-width:2;}
.pt-sign{fill:var(--amber);}
.pt-sign-text{fill:#00324B;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:3px;text-anchor:middle;}
.pt-win{fill:#F2C36B;opacity:.85;animation:pt-win 4s calc(var(--i) * .45s) ease-in-out infinite;}
@keyframes pt-win{50%{opacity:.35;}}
.pt-door{fill:#033D59;stroke:var(--galv);stroke-width:1.5;}
.pt-smoke{fill:#B8C4C8;opacity:0;transform-box:fill-box;transform-origin:center;animation:pt-smoke 4.2s ease-out infinite;}
.pt-smoke.s2{animation-delay:-1.4s;}.pt-smoke.s3{animation-delay:-2.8s;}
@keyframes pt-smoke{0%{opacity:.55;transform:translate(0,0) scale(.6);}100%{opacity:0;transform:translate(34px,-60px) scale(2.2);}}
.pt-belt{fill:#1E2A30;stroke:var(--galv);stroke-width:1.5;}
.pt-roller circle{fill:#55707C;}
.pt-roller line{stroke:#B8C4C8;stroke-width:1.5;}
.pt-roller{animation:pt-spin 1.1s linear infinite;}
@keyframes pt-spin{to{transform:rotate(360deg);}}
/* loads */
.pt-crate{fill:#B98A3E;stroke:#7A5826;stroke-width:1.5;}
.pt-crate-line{fill:none;stroke:#7A5826;stroke-width:1.5;}
.pt-pallet{fill:#8C6420;}
.pt-pack{fill:#D9B27A;stroke:#8C6420;stroke-width:1;}
.pt-pack.b{fill:#E4C38F;}
.pt-tape{stroke:#8C6420;stroke-width:1.2;}
.pt-wrap{fill:#C7D3D8;stroke:#7C9099;stroke-width:1.5;}
.pt-strap{stroke:var(--amber);stroke-width:2.5;}
.pt-label{fill:#fff;}
.pt-item{opacity:0;animation:pt-item var(--T) linear infinite;}
.pt-item.i2{animation-delay:1.4s;}.pt-item.i3{animation-delay:2.8s;}
@keyframes pt-item{0%{opacity:0;transform:translate(0,0);}2%{opacity:1;}20%{opacity:1;transform:translate(178px,0);}23%{opacity:0;transform:translate(184px,8px);}100%{opacity:0;transform:translate(184px,8px);}}
/* crane */
.pt-crane-leg,.pt-boom{fill:none;stroke:var(--galv);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.pt-tie{stroke:#9DB0B7;stroke-width:1.5;}
.pt-cab{fill:var(--amber);}
.pt-trolley rect:first-child{fill:#D9E2E6;}
.pt-trolley{animation:pt-trolley var(--T) ease-in-out infinite;}
@keyframes pt-trolley{0%,48%{transform:translateX(0);}56%,60%{transform:translateX(178px);}68%,100%{transform:translateX(0);}}
.pt-cable{stroke:#A9BCC7;stroke-width:1.5;transform-box:fill-box;transform-origin:top;animation:pt-cable var(--T) ease-in-out infinite;}
@keyframes pt-cable{0%,38%{transform:scaleY(.12);}42%{transform:scaleY(1);}48%,56%{transform:scaleY(.12);}60%{transform:scaleY(1.06);}64%,100%{transform:scaleY(.12);}}
.pt-spreader{fill:#D9E2E6;animation:pt-spreader var(--T) ease-in-out infinite;}
@keyframes pt-spreader{0%,38%{transform:translateY(-150px);}42%{transform:translateY(0);}48%,56%{transform:translateY(-150px);}60%{transform:translateY(10px);}64%,100%{transform:translateY(-150px);}}
/* container */
.pt-container{fill:var(--amber);stroke:#8C6420;stroke-width:1.5;}
.pt-ribs{stroke:#B07815;stroke-width:2;}
.pt-box{animation:pt-box var(--T) ease-in-out infinite;}
@keyframes pt-box{0%{transform:translate(0,0);opacity:0;}4%,42%{transform:translate(0,0);opacity:1;}48%{transform:translate(0,-150px);}56%{transform:translate(178px,-150px);}60%,64%{transform:translate(178px,10px);}78%,80%{transform:translate(292px,10px);}83%{transform:translate(292px,-24px);}87%{transform:translate(462px,-24px);}89%,98%{transform:translate(462px,18px);opacity:1;}100%{transform:translate(462px,18px);opacity:0;}}
/* ship */
.pt-hull{fill:#0A3550;stroke:var(--galv);stroke-width:1.5;}
.pt-bridge{fill:#E8EEF0;}
.pt-bridge-win{fill:#0A3550;}
.pt-funnel{fill:var(--amber);}
.pt-cargo{fill:#17698C;stroke:#B8C4C8;stroke-width:1;}
.pt-ship{animation:pt-ship var(--T) ease-in-out infinite;}
@keyframes pt-ship{0%{transform:translate(0,0);opacity:0;}3%,64%{transform:translate(0,0);opacity:1;}78%,96%{transform:translate(114px,0);opacity:1;}99%,100%{transform:translate(114px,0);opacity:0;}}
/* Turkish flag beside the factory */
.pt-pole{stroke:var(--galv);stroke-width:3;stroke-linecap:round;}
.pt-pole-top{fill:var(--amber);}
.pt-tr-flag{transform-box:fill-box;transform-origin:left center;animation:pt-tr-flag 2.2s ease-in-out infinite;}
@keyframes pt-tr-flag{0%,100%{transform:skewY(0) scaleX(1);}25%{transform:skewY(5deg) scaleX(.95);}50%{transform:skewY(0) scaleX(.9);}75%{transform:skewY(-5deg) scaleX(.95);}}
/* destination quay: the customers wave while the ship comes in and cheer when it docks */
.pt-head{fill:var(--skin,#F1C9A5);}
.pt-eye{fill:#3A2A20;}
.pt-smile{fill:none;stroke:#3A2A20;stroke-width:1.2;stroke-linecap:round;}
.pt-torso{stroke:rgba(0,0,0,.25);stroke-width:.8;}
.pt-leg{stroke:#1E2A30;stroke-width:3;stroke-linecap:round;}
.pt-arm{stroke:var(--skin,#F1C9A5);stroke-width:3;stroke-linecap:round;transform-box:fill-box;}
.pt-arm.l{transform-origin:right bottom;animation:pt-wave-l var(--T) calc(var(--d) * 1s) ease-in-out infinite;}
.pt-arm.r{transform-origin:left bottom;animation:pt-wave-r var(--T) calc(var(--d) * 1s) ease-in-out infinite;}
@keyframes pt-wave-l{0%,64%{transform:rotate(-140deg);}67%,71%,75%,79%,83%,87%{transform:rotate(-10deg);}69%,73%,77%,81%,85%{transform:rotate(-45deg);}89%,96%{transform:rotate(0);}99%,100%{transform:rotate(-140deg);}}
@keyframes pt-wave-r{0%,64%{transform:rotate(140deg);}67%,71%,75%,79%,83%,87%{transform:rotate(10deg);}69%,73%,77%,81%,85%{transform:rotate(45deg);}89%,96%{transform:rotate(0);}99%,100%{transform:rotate(140deg);}}
.pt-body{animation:pt-jump var(--T) calc(var(--d) * 1s) ease-in-out infinite;}
@keyframes pt-jump{0%,89%{transform:none;}90%{transform:translateY(-12px);}91.5%{transform:none;}93%{transform:translateY(-12px);}94.5%{transform:none;}96%{transform:translateY(-12px);}97.5%,100%{transform:none;}}
.pt-jib-cab{fill:var(--amber);}
.pt-t2{fill:#D9E2E6;}
.pt-trolley2{animation:pt-trolley2 var(--T) ease-in-out infinite;}
@keyframes pt-trolley2{0%,83%{transform:translateX(0);}87%,89%{transform:translateX(170px);}94%,100%{transform:translateX(0);}}
.pt-cable2{stroke:#A9BCC7;stroke-width:1.5;transform-box:fill-box;transform-origin:top;animation:pt-cable2 var(--T) ease-in-out infinite;}
@keyframes pt-cable2{0%,77%{transform:scaleY(.33);}80%{transform:scaleY(1);}83%,87%{transform:scaleY(.33);}89%{transform:scaleY(1.17);}93%,100%{transform:scaleY(.33);}}
.pt-spreader2{fill:#D9E2E6;animation:pt-spreader2 var(--T) ease-in-out infinite;}
@keyframes pt-spreader2{0%,77%{transform:translateY(-34px);}80%{transform:translateY(0);}83%,87%{transform:translateY(-34px);}89%{transform:translateY(8px);}93%,100%{transform:translateY(-34px);}}
.pt-jib{fill:none;stroke:var(--galv);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.pt-cheek{fill:#E8806F;opacity:.55;}
.pt-heart{opacity:0;transform-box:fill-box;transform-origin:center;animation:pt-heart var(--T) calc(var(--i) * .12s) ease-out infinite;}
@keyframes pt-heart{0%,89%{opacity:0;transform:translateY(10px) scale(.4);}91%{opacity:1;transform:translateY(0) scale(1.15);}97%{opacity:1;transform:translateY(-26px) scale(1);}99%,100%{opacity:0;transform:translateY(-30px) scale(.9);}}
.pt-confetti rect{opacity:0;transform-box:fill-box;animation:pt-confetti var(--T) calc(var(--i) * .08s) ease-out infinite;}
@keyframes pt-confetti{0%,89%{opacity:0;transform:translateY(14px) rotate(0);}91%{opacity:1;}97%{opacity:1;transform:translateY(-34px) rotate(220deg);}99%,100%{opacity:0;transform:translateY(-38px) rotate(260deg);}}

/* captions: production / loading / shipping, in step with the scene */
.port-cap span{animation:var(--T) linear infinite;}
.port-cap span:nth-child(1){animation-name:pt-cap1;}
.port-cap span:nth-child(2){animation-name:pt-cap2;}
.port-cap span:nth-child(3){animation-name:pt-cap3;}
.port-cap span:nth-child(4){animation-name:pt-cap4;}
@keyframes pt-cap1{0%,38%{color:var(--ink);background:var(--amber);border-color:var(--amber);}40%,100%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}}
@keyframes pt-cap2{0%,38%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}40%,62%{color:var(--ink);background:var(--amber);border-color:var(--amber);}64%,100%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}}
@keyframes pt-cap3{0%,62%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}64%,78%{color:var(--ink);background:var(--amber);border-color:var(--amber);}80%,100%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}}
@keyframes pt-cap4{0%,78%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}80%,96%{color:var(--ink);background:var(--amber);border-color:var(--amber);}100%{color:var(--on-dark-muted);background:transparent;border-color:var(--line-dark);}}
@media(prefers-reduced-motion:reduce){
  .port-scene *,.port-cap span{animation:none !important;}
  .pt-item.i1,.pt-box{opacity:1;}
}

/* generated pages carry every language; show only the active one */
html[lang="tr"] [data-l]:not([data-l="tr"]), html[lang="en"] [data-l]:not([data-l="en"]), html[lang="fr"] [data-l]:not([data-l="fr"]) { display: none !important; }