:root{
  --ink:#07111d;--navy:#0a1725;--navy2:#0e2032;--text:#182433;--muted:#657587;
  --line:#dbe3e9;--paper:#f6f8fa;--white:#fff;--orange:#ff8a35;--orange2:#ffb65a;--cyan:#83d6ff;
  --radius:18px;--shadow:0 18px 55px rgba(6,20,34,.10)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--white);line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(7,17,29,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-weight:850;letter-spacing:.13em;font-size:18px}.brand>span:last-child span{color:var(--orange)}.brand-mark{width:31px;height:27px;display:flex;gap:3px;align-items:flex-end}.brand-mark span{display:block;width:7px;border-radius:5px 5px 2px 2px;background:var(--orange)}.brand-mark span:nth-child(1){height:16px}.brand-mark span:nth-child(2){height:24px;background:#fff}.brand-mark span:nth-child(3){height:11px;background:var(--cyan)}nav{display:flex;align-items:center;gap:28px;font-size:13px;font-weight:700;color:#c9d3de}nav a:hover{color:#fff}.nav-cta{padding:11px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff}.nav-cta span{color:var(--orange);margin-left:5px}.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:670px}.hero-grid{position:absolute;inset:0;opacity:.26;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to right,#000,transparent 85%)}.hero:after{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,53,.16),transparent 65%);right:-160px;top:30px}.hero-inner{min-height:590px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:35px;position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;font-weight:800;color:#738496;margin-bottom:17px}.hero .eyebrow{color:#9eb0c2}.eyebrow i{width:22px;height:2px;background:var(--orange);display:inline-block}.hero h1{font-size:clamp(46px,6vw,77px);line-height:.98;letter-spacing:-.055em;margin:0 0 25px;max-width:750px}.hero h1 em,h2 em{font-style:normal;color:var(--orange)}.hero-lead{font-size:18px;line-height:1.7;color:#bdc9d5;max-width:650px;margin:0 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:0;border-radius:10px;padding:15px 20px;font-weight:800;font-size:14px;cursor:pointer;transition:.2s transform,.2s box-shadow}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--orange);color:#111b24;box-shadow:0 12px 30px rgba(255,138,53,.2)}.btn-primary:hover{box-shadow:0 16px 36px rgba(255,138,53,.3)}.btn-ghost{border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.04)}.hero-note{margin-top:18px;color:#92a4b5;font-size:12px}.check{color:var(--orange);font-weight:900;margin-right:6px}.hero-visual{height:490px;position:relative;display:flex;align-items:center;justify-content:center}.hero-visual svg{width:100%;max-width:620px;overflow:visible}.node circle:first-child{fill:#0d1e2d;stroke:var(--orange);stroke-width:4}.node circle:last-child{fill:var(--orange)}.circuit-label{position:absolute;z-index:2;font-size:10px;letter-spacing:.13em;font-weight:800;padding:9px 12px;border:1px solid rgba(255,255,255,.13);background:rgba(7,17,29,.72);border-radius:6px;color:#9db0c1}.label-a{top:68px;right:25px}.label-b{bottom:64px;left:15px}.hero-bottom{height:80px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2;font-size:10px;letter-spacing:.13em;color:#8093a5;font-weight:800}.hero-bottom span:last-child{color:#b6c3ce}
.trust-strip{background:#f2f5f7;border-bottom:1px solid var(--line)}.trust-items{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0}.trust-items div{display:flex;align-items:center;gap:12px;padding:8px 20px;border-right:1px solid var(--line);font-size:12px;font-weight:750}.trust-items div:first-child{padding-left:0}.trust-items div:last-child{border:0}.trust-items strong{color:var(--orange);font-size:10px;letter-spacing:.1em}
.section{padding:110px 0}.section-head{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;margin-bottom:45px}.section-head h2,h2{font-size:clamp(36px,4.5vw,58px);line-height:1.02;letter-spacing:-.045em;margin:0}.section-head>p{margin:0;color:var(--muted);font-size:16px;max-width:450px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;min-height:270px;transition:.25s box-shadow,.25s transform,.25s border-color}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c6d1da}.service-card.featured{background:var(--navy);color:#fff;border-color:var(--navy)}.service-card .num{font-size:10px;color:var(--orange);font-weight:900;letter-spacing:.1em}.service-card h3{font-size:21px;letter-spacing:-.025em;margin:42px 0 9px}.service-card p{color:var(--muted);font-size:14px;margin:0 0 22px}.featured p{color:#aebdca}.service-card span{font-size:10px;color:#8292a1;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.featured span{color:#8299ac}
.dark-section{background:var(--navy);color:#fff}.two-col{display:grid;grid-template-columns:1fr .8fr;gap:100px;align-items:center}.dark-section .eyebrow{color:#8297aa}.large{font-size:18px;color:#aebdca;max-width:620px;line-height:1.75;margin:25px 0 30px}.text-link{color:#fff;font-size:13px;font-weight:800;border-bottom:1px solid var(--orange);padding-bottom:4px}.model-box{padding:38px;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}.model-step{display:flex;align-items:center;gap:18px}.model-step>b{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;border:1px solid #385168;color:var(--orange);font-size:11px}.model-step strong{display:block;letter-spacing:.1em;font-size:12px}.model-step small{display:block;color:#8498aa;font-size:11px;margin-top:4px}.connector-line{height:35px;border-left:1px dashed #3a5268;margin-left:21px}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.process-card{background:#fff;padding:29px;min-height:190px}.process-card b{color:var(--orange);font-size:11px}.process-card h3{font-size:18px;margin:26px 0 8px}.process-card p{font-size:13px;color:var(--muted);margin:0}
.industry-section{background:#eef3f6;padding:95px 0}.industry-section h2{max-width:850px;margin-bottom:42px}.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.industry-grid div{background:#fff;border:1px solid #dce4e9;border-radius:12px;padding:22px;font-size:16px;font-weight:800}.industry-grid small{display:block;color:#81909e;font-size:11px;font-weight:500;margin-top:7px}
.rfq-section{background:#fff;padding:110px 0}.rfq-wrap{display:grid;grid-template-columns:1fr .9fr;gap:90px;align-items:start}.rfq-copy h2{font-size:clamp(44px,5vw,66px)}.rfq-copy>p{font-size:17px;color:var(--muted);max-width:570px;margin:25px 0}.rfq-points{display:grid;gap:10px;font-size:13px;font-weight:700;color:#506172}.rfq-points span::first-letter{color:var(--orange)}.rfq-form{border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);background:#fff}.form-title{font-size:20px;font-weight:850;margin-bottom:25px}.form-title span{float:right;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8a98a5;padding-top:6px}label{display:block;font-size:11px;font-weight:800;letter-spacing:.03em;margin:0 0 15px}input,textarea{display:block;width:100%;margin-top:7px;border:1px solid #d7e0e6;background:#f8fafb;border-radius:9px;padding:13px 14px;font:inherit;font-size:13px;outline:none;transition:.2s}input:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,53,.12);background:#fff}textarea{min-height:125px;resize:vertical}.rfq-form .btn{width:100%;margin-top:5px}.form-note{font-size:10px;color:#8996a1;line-height:1.5}.form-message{font-size:12px;color:#3b6b4e;margin-top:8px}
footer{background:#07111d;color:#9eafbd;padding:65px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footer-grid .brand{color:#fff;margin-bottom:14px}.footer-grid p{max-width:340px;font-size:13px}.footer-grid strong{display:block;color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}.footer-grid a:not(.brand){display:block;font-size:12px;margin:9px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;font-size:10px;color:#64788b}
@media(max-width:900px){.container{width:min(100% - 34px,680px)}nav{display:none;position:absolute;top:76px;left:0;right:0;background:#07111d;padding:18px;flex-direction:column;align-items:stretch;border-top:1px solid rgba(255,255,255,.08)}nav.open{display:flex}.menu-toggle{display:block}.hero-inner{grid-template-columns:1fr;padding-top:65px;padding-bottom:20px}.hero{min-height:auto}.hero-visual{height:390px}.hero h1{font-size:clamp(44px,11vw,66px)}.hero-bottom{display:none}.trust-items{grid-template-columns:repeat(2,1fr)}.trust-items div:nth-child(2){border-right:0}.section{padding:80px 0}.section-head,.two-col,.rfq-wrap{grid-template-columns:1fr;gap:35px}.service-grid,.industry-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.rfq-wrap{gap:50px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.container{width:calc(100% - 28px)}.hero-visual{height:300px}.label-a,.label-b{font-size:8px}.trust-items{grid-template-columns:1fr}.trust-items div{border-right:0;border-bottom:1px solid var(--line);padding:12px 0}.service-grid,.process-grid,.industry-grid{grid-template-columns:1fr}.service-card{min-height:0}.section-head h2,h2{font-size:40px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}}

.direct-email{display:flex;align-items:center;gap:14px;margin:24px 0 22px;padding:14px 16px;border:1px solid #dbe3e9;border-radius:10px;background:#f7f9fa;width:max-content;max-width:100%}.direct-email span{font-size:9px;letter-spacing:.14em;font-weight:900;color:#8a98a5}.direct-email a{font-size:14px;font-weight:850;color:#152637}.direct-email a:hover{color:#e86f1d}@media(max-width:560px){.direct-email{width:100%;justify-content:space-between}}

/* WIRINGKO supplied logo */
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid #e2e8ed;color:var(--ink);box-shadow:0 4px 18px rgba(6,20,34,.05)}
.brand{display:flex;align-items:center;gap:0;letter-spacing:0}
.brand img{display:block;width:178px;height:auto}
nav{color:#344454}
nav a:hover{color:var(--ink)}
.nav-cta{border-color:#d3dde4;color:var(--ink);background:#fff}
.nav-cta:hover{background:#f4f7f9}
.menu-toggle{color:var(--ink)}
.footer-brand{background:#fff;border-radius:12px;padding:10px 14px;width:max-content;max-width:100%;margin-bottom:14px}
.footer-brand img{width:230px}
@media(max-width:900px){nav{background:#fff;border-top:1px solid #e2e8ed;box-shadow:0 15px 25px rgba(6,20,34,.08)}.brand img{width:160px}}
@media(max-width:560px){.brand img{width:145px}.footer-brand img{width:210px}}

/* capability cards -> links with mini illustrations */
a.service-card{display:block;color:inherit;min-height:0}
.service-card .thumb{display:flex;align-items:center;gap:8px;margin:20px 0 0;color:var(--navy2)}
.service-card.featured .thumb{color:#dbe7f2}
.g{width:40px;height:40px;flex:none}
.thumb i{flex:1;min-width:12px;height:0;border-top:2px dashed currentColor;opacity:.3;position:relative}
.thumb i:after{content:"";position:absolute;right:-2px;top:-6px;border:5px solid transparent;border-left:8px solid currentColor}
.service-card h3{margin:20px 0 9px}
.service-card span{display:block;margin-bottom:16px}
.service-card .more{display:inline-block;font-size:12px;font-weight:850;color:var(--orange);letter-spacing:.02em}
.service-card .more em{display:inline-block;font-style:normal;transition:.2s transform}
.service-card:hover .more em{transform:translateX(5px)}
/* how each capability works */
.how-section{background:var(--paper);padding:110px 0}
.how{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;margin-top:22px;scroll-margin-top:96px;transition:.3s box-shadow,.3s border-color}
.how:target{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,53,.14),var(--shadow)}
.how-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px}
.how-num{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.06em}
.how-head h3{font-size:28px;letter-spacing:-.03em;margin:0 0 8px;line-height:1.1}
.how-head p{margin:0;color:var(--muted);max-width:760px}
.flow3{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:stretch}
.fp{border:1px solid var(--line);border-radius:14px;padding:20px;background:#fafcfd}
.fp h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7b8b99;margin:0 0 14px}
.fp ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fp li{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:650;line-height:1.3}
.fp .g{width:46px;height:46px;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--navy2);box-sizing:border-box}
.fp-mid{background:var(--navy);border-color:var(--navy);color:#fff}
.fp-mid h4{color:#8fa4b8}
.fp-mid .g{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.fp-out{background:#fff7ef;border-color:#ffd9b8}
.fp-out .g{border-color:#ffd9b8}
.fa{position:relative}
.fa:before{content:"";position:absolute;left:6px;right:10px;top:50%;border-top:2px dashed #b7c4cf}
.fa:after{content:"";position:absolute;right:4px;top:calc(50% - 6px);border:6px solid transparent;border-left:9px solid #b7c4cf}
.how-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.how-foot a:not(.btn){font-size:12px;font-weight:800;color:#506172}
.how-foot a:not(.btn):hover{color:var(--orange)}
@media(max-width:900px){.how-section{padding:80px 0}.flow3{grid-template-columns:1fr}.fa{height:36px}.fa:before{left:50%;right:auto;top:4px;bottom:14px;border-top:0;border-left:2px dashed #b7c4cf}.fa:after{left:calc(50% - 6px);right:auto;top:auto;bottom:3px;border:6px solid transparent;border-top:9px solid #b7c4cf}.how{padding:22px}.how-head h3{font-size:23px}}
@media(max-width:560px){.how-foot .btn{width:100%}.how-head{gap:12px}}
/* logo fix: horizontal logo fits the header */
.brand img{width:auto;height:41px}
@media(max-width:900px){.brand img{width:auto;height:34px}}
@media(max-width:560px){.brand img{width:auto;height:30px}}

/* our work: photo / drawing placeholders */
[hidden]{display:none!important}
.work-section{padding:110px 0;background:#fff}
.work-sub{font-size:11px;letter-spacing:.14em;font-weight:900;color:#7b8b99;text-transform:uppercase;margin:52px 0 16px}
.ph{position:relative;overflow:hidden;display:grid;place-items:center;border:2px dashed #c3d0da;border-radius:14px;background:repeating-linear-gradient(45deg,#f3f6f9,#f3f6f9 10px,#ecf1f5 10px,#ecf1f5 20px)}
.ph-in{display:grid;justify-items:center;gap:6px;text-align:center;padding:14px;color:#7f93a4}
.ph-in .g{width:36px;height:36px}
.ph-in b{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ph-in small{font-size:10px;opacity:.85;word-break:break-all}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;opacity:0;transition:.4s opacity}
.ph.loaded{border-color:transparent;cursor:zoom-in}
.ph.loaded img{opacity:1}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-card{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.25s box-shadow,.25s transform}
.work-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.work-card.big{grid-column:span 2}
.work-card .ph{flex:1;min-height:230px;border-radius:0;border-width:0 0 1px;border-style:solid;border-color:var(--line)}
.work-card .ph:not(.loaded){border-style:dashed;border-width:0 0 2px}
.work-card.big .ph{min-height:330px}
.work-card figcaption{padding:18px 20px 20px}
.work-card h4{font-size:18px;letter-spacing:-.02em;margin:0 0 5px}
.work-card p{font-size:13px;color:var(--muted);margin:0 0 12px}
.wtags{display:flex;flex-wrap:wrap;gap:6px}
.wtags span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8292a1;background:#eef3f6;padding:5px 9px;border-radius:99px}
.draw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.draw-card{margin:0}
.draw-card .ph{aspect-ratio:16/10}
.draw-card .ph img{object-fit:contain}
.draw-card figcaption,.app-card figcaption{font-size:13px;font-weight:700;color:#3c4d5d;margin-top:10px}
.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.app-card{margin:0}
.app-card .ph{aspect-ratio:1/1}
.app-card .ph-in small{display:none}
.work-cta{margin-top:50px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 28px;border-radius:var(--radius);background:var(--navy);color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em}
.work-cta .btn span{margin-left:0}
.lb{position:fixed;inset:0;z-index:100;background:rgba(7,17,29,.92);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:8px}
.lb button{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:38px;line-height:1;cursor:pointer}
@media(max-width:900px){.work-section{padding:80px 0}.work-grid{grid-template-columns:1fr}.work-card.big{grid-column:auto}.work-card .ph,.work-card.big .ph{min-height:0;aspect-ratio:4/3;flex:none}.draw-grid{grid-template-columns:1fr}.app-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.app-grid{grid-template-columns:repeat(2,1fr)}.work-cta{font-size:18px}.work-cta .btn{width:100%}}

/* hero: wires into connector */
.hw{stroke-dasharray:1;stroke-dashoffset:1;animation:hdraw 1.5s cubic-bezier(.5,.1,.2,1) forwards}
@keyframes hdraw{to{stroke-dashoffset:0}}
.hconn{opacity:0;animation:hfade .7s .9s forwards}
@keyframes hfade{to{opacity:1}}
.hero-photo{position:absolute;inset:18px 0;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual.has-photo svg{display:none}
@media(prefers-reduced-motion:reduce){.hw{animation:none;stroke-dashoffset:0}.hconn{animation:none;opacity:1}}
@media(max-width:560px){.hero-visual .label-a{top:4px;right:auto;left:0}.hero-visual .label-b{bottom:4px;left:0}}
/* hero: team photo as full-bleed vivid background under the text */
.hero{background:var(--navy) url("images/hero-bg.jpg") 62% center/cover no-repeat}
.hero-grid,.hero:after{display:none}
.hero:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(7,17,29,.8) 0,rgba(7,17,29,0) 22%),linear-gradient(90deg,rgba(7,17,29,.93) 0,rgba(7,17,29,.84) 30%,rgba(7,17,29,.42) 56%,rgba(7,17,29,.03) 100%)}
.hero-visual>*{display:none}
.hero-copy{text-shadow:0 2px 18px rgba(0,0,0,.45)}
@media(max-width:900px){
  .hero{background-position:center bottom;background-size:100% auto}
  .hero:before{background:linear-gradient(180deg,#0a1725 calc(100% - 56vw - 20px),rgba(10,23,37,0) calc(100% - 56vw + 60px))}
  .hero-visual{height:56vw}
  .hero-bottom{display:none}
}

/* photos: layout for real images */
.ph-contain img{object-fit:contain}
.work-card .ph{min-height:280px}
.work-card .ph-contain{background:#fff}
.draw-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.draw-card{max-width:600px}
.how-photo{margin:0 0 0 auto;flex:0 0 280px;align-self:flex-start}
.how-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.how-photo figcaption{font-size:11px;color:#8292a1;margin-top:6px;text-align:right}
@media(max-width:900px){.how-head{flex-wrap:wrap}.how-photo{flex:1 1 100%;margin:6px 0 0;order:3}}
@media(min-width:901px){.hero-inner{grid-template-columns:1.3fr .7fr}.hero h1{font-size:clamp(46px,5.2vw,70px);max-width:760px}.hero-lead{max-width:600px}}

/* crisper hero type */
.hero h1{letter-spacing:-.028em;line-height:1.04;text-shadow:none}
.hero-copy{text-shadow:none}
.hero:before{background:linear-gradient(0deg,rgba(7,17,29,.8) 0,rgba(7,17,29,0) 22%),linear-gradient(90deg,rgba(7,17,29,.95) 0,rgba(7,17,29,.89) 32%,rgba(7,17,29,.5) 58%,rgba(7,17,29,.03) 100%)}
@media(max-width:900px){.hero:before{background:linear-gradient(180deg,#0a1725 calc(100% - 56vw - 20px),rgba(10,23,37,0) calc(100% - 56vw + 60px))}}
/* project flow */
.flow-section{background:#f4f7fa;padding:100px 0}
.flegend{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.flegend span{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:99px;color:#fff;background:var(--c)}
.client{--c:#7d8b99}.wk{--c:var(--orange)}.fac{--c:#2c6bd6}
.flegend .wk{color:#111b24}
.fhint{display:none;font-size:12px;color:#6d7f90;margin:14px 0 0}
.fsteps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px 26px}
.fstep{position:relative;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
.fhead{display:flex;align-items:center;justify-content:space-between}
.fnum{width:30px;height:30px;border-radius:50%;background:var(--c);color:#fff;font-weight:900;font-size:14px;display:grid;place-items:center}
.fstep.wk .fnum{color:#111b24}
.fwho{font-size:10px;letter-spacing:.12em;font-weight:900;text-transform:uppercase;color:var(--c)}
.fstep.wk .fwho{color:#d96a1a}
.fimg{position:relative;margin:0;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.fimg img{width:100%;height:100%;object-fit:cover;display:block}
.fimg.fit img{object-fit:contain}
.ill{position:absolute;left:8px;bottom:8px;background:rgba(10,23,37,.8);color:#fff;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:4px 8px;border-radius:99px}
.fstep h3{font-size:17px;margin:2px 0 0;letter-spacing:-.02em;line-height:1.2}
.fstep p{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
.fstep:not(:last-child):after{content:"\2192";position:absolute;right:-21px;top:40%;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#111b24;font-weight:900;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.fstep:nth-child(4):after{display:none}
.fnote{margin:26px 0 0;font-size:12px;color:#6d7f90}
@media(max-width:900px){
 .flow-section{padding:76px 0}
 .fhint{display:block}
 .fsteps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:30px;margin:18px -17px 0;padding:8px 17px 20px}
 .fstep{flex:0 0 78%;scroll-snap-align:center}
 .fstep:nth-child(4):after{display:grid}
 .fstep:last-child:after{display:none}
 .fstep:not(:last-child):after{right:-26px}
}