@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#f2eee4;
  --paper2:#e9e3d5;
  --white:#fbf9f4;
  --ink:#1b1f1d;
  --ink2:#3b413e;
  --muted:#6f726b;
  --line:#d6cfbe;
  --green:#0b5d3b;
  --green2:#0f7a4e;
  --brick:#c4512b;
  --sun:#e8a33d;
  --disp:'Big Shoulders Display',Impact,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;overflow-x:hidden;
  background-image:linear-gradient(rgba(27,31,29,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,31,29,.045) 1px,transparent 1px);background-size:32px 32px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{display:block}
.wrap{width:min(1240px,92%);margin-inline:auto}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);display:inline-flex;align-items:center;gap:.6rem}
.tag::before{content:"";width:10px;height:10px;border:2px solid var(--brick);transform:rotate(45deg)}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
.green{color:var(--green)}.brick{color:var(--brick)}

/* NAV */
.util{background:var(--ink);color:#d8d4c8;font-size:.8rem}
.util .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.util span{display:inline-flex;gap:.4rem;align-items:center;margin-right:1.4rem}
.util b{color:#fff;font-weight:600}
.util .bn{font-family:'Noto Sans Bengali',var(--sans);color:var(--sun)}
.nav{position:sticky;top:0;z-index:60;background:rgba(242,238,228,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem}
.logo-mark{width:46px;height:46px;background:var(--green);display:grid;place-items:center;flex-shrink:0;clip-path:polygon(0 100%,0 30%,50% 0,100% 30%,100% 100%)}
.logo-mark svg{width:26px;height:26px;margin-top:6px}
.logo b{font-family:var(--disp);font-weight:900;font-size:1.55rem;letter-spacing:.02em;line-height:1;display:block;white-space:nowrap}
.logo small{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
.menu{display:flex;list-style:none;gap:0;border-left:1px solid var(--line)}
.menu a{display:block;padding:.6rem 1.05rem;font-weight:600;font-size:.88rem;border-right:1px solid var(--line);transition:.2s;white-space:nowrap}
.menu a:hover{background:var(--white)}
.menu a.active{background:var(--ink);color:var(--paper)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--ink)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.6rem;font-weight:700;font-size:.9rem;letter-spacing:.03em;border:2px solid var(--ink);transition:.2s;white-space:nowrap}
.btn-green{background:var(--green);color:#fff;border-color:var(--green);box-shadow:5px 5px 0 var(--ink)}
.btn-green:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--brick)}
.btn-ink:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--brick)}
.btn-out{background:transparent}
.btn-out:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:.65rem 1rem;font-size:.82rem;box-shadow:3px 3px 0 var(--ink)}

/* HERO */
.hero{padding:4rem 0 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:end}
.hero h1{font-size:clamp(2.6rem,5.8vw,5.4rem);margin:1.2rem 0 1.4rem}
.hero h1 .o{-webkit-text-stroke:2px var(--ink);color:transparent}
.hero h1 .g{color:var(--green)}
.hero p.lead{font-size:1.1rem;color:var(--ink2);max-width:520px;margin-bottom:2rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:1/1.05;border:2px solid var(--ink);background:var(--white);overflow:hidden}
.hero-art svg{width:100%;height:100%}
.hero-art .dim{position:absolute;font-family:var(--mono);font-size:.68rem;color:var(--brick);background:var(--white);padding:.15rem .4rem;border:1px solid var(--brick)}
.hero-art .card{position:absolute;left:1rem;bottom:1rem;background:var(--ink);color:var(--paper);padding:1rem 1.2rem;max-width:250px;box-shadow:5px 5px 0 var(--brick)}
.hero-art .card b{font-family:var(--disp);font-size:2rem;display:block;line-height:1}
.hero-art .card small{font-size:.8rem;color:#c8c3b6}
.crane-arm{transform-origin:330px 70px;animation:swing 9s ease-in-out infinite}
@keyframes swing{50%{transform:rotate(-7deg)}}
.hook{animation:hookbob 4.5s ease-in-out infinite}
@keyframes hookbob{50%{transform:translateY(18px)}}
.rise{animation:rise 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:scaleY(0)}}

/* STAT BAND */
.band{margin-top:4rem;background:var(--ink);color:var(--paper)}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.band .s{padding:2rem 1.6rem;border-right:1px solid #3b413e}
.band .s:last-child{border-right:0}
.band b{font-family:var(--disp);font-size:clamp(2.6rem,5vw,4.2rem);font-weight:900;line-height:1;display:block;color:#fff}
.band b span{font:inherit;color:inherit}
.band b i{font-style:normal;color:var(--sun)}
.band small{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#a9a597}

/* SECTIONS */
section{padding:7rem 0;position:relative}
.head{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:3.5rem;border-bottom:2px solid var(--ink);padding-bottom:1.6rem}
.head h2{font-size:clamp(2.6rem,5.6vw,5rem);margin-top:.8rem}
.head p{color:var(--ink2);max-width:420px}
.num-head{font-family:var(--disp);font-size:6rem;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--line)}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.svc{padding:2.2rem;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--white);position:relative;transition:.3s;display:flex;flex-direction:column}
.svc:hover{background:var(--green);color:#fff}
.svc:hover p,.svc:hover .n{color:#cfe8dc}
.svc:hover .si{background:#fff;color:var(--green)}
.svc .n{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-bottom:1.6rem}
.svc .si{width:58px;height:58px;background:var(--paper2);display:grid;place-items:center;margin-bottom:1.4rem;color:var(--green);transition:.3s}
.svc .si svg{width:30px;height:30px}
.svc h3{font-size:2rem;margin-bottom:.6rem}
.svc p{color:var(--ink2);font-size:.94rem;flex:1}
.svc ul{list-style:none;margin-top:1.2rem;display:grid;gap:.35rem;font-size:.86rem}
.svc li::before{content:"— ";color:var(--brick)}
.svc:hover li::before{color:var(--sun)}
.svc .more{margin-top:1.4rem;font-weight:700;font-size:.86rem}

/* PROJECTS */
.filters{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--ink);width:max-content;max-width:100%;margin-bottom:2rem;background:var(--white)}
.filters button{padding:.7rem 1.2rem;font-weight:600;font-size:.86rem;border-right:1px solid var(--line)}
.filters button:last-child{border-right:0}
.filters button.on{background:var(--ink);color:var(--paper)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.proj{background:var(--white);border:2px solid var(--ink);cursor:pointer;transition:.3s;display:flex;flex-direction:column;animation:up .5s both}
.proj:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--green)}
.proj .pimg{aspect-ratio:440/380;border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.proj .pimg svg{width:100%;height:100%;transition:.6s}
.proj:hover .pimg svg{transform:scale(1.05)}
.proj .status{position:absolute;top:.8rem;left:.8rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;background:var(--ink);color:#fff}
.proj .status.ongoing{background:var(--sun);color:#000}
.proj .pb{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.proj .pb .mono{color:var(--brick)}
.proj h3{font-size:1.8rem}
.proj .meta{display:flex;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.9rem;border-top:1px dashed var(--line);font-size:.84rem;color:var(--ink2)}
.proj .meta b{color:var(--ink)}
.feature{display:grid;grid-template-columns:1.3fr 1fr;border:2px solid var(--ink);background:var(--white);margin-bottom:1.4rem}
.feature .fimg{border-right:2px solid var(--ink);min-height:380px;position:relative;background:#f6f2e8}
.feature .fimg svg{position:absolute;inset:0;width:100%;height:100%}
.feature .fb{padding:2.4rem;display:flex;flex-direction:column;gap:1rem}
.feature h3{font-size:2.8rem}
.kv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kv div{padding:.8rem 1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kv small{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kv b{font-size:.95rem}

/* PROCESS */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:p}
.pstep{padding:2rem 1.4rem;border-left:2px solid var(--ink);position:relative}
.pstep:last-child{border-right:2px solid var(--ink)}
.pstep::before{counter-increment:p;content:"0" counter(p);font-family:var(--disp);font-weight:900;font-size:3.6rem;line-height:1;color:var(--green);display:block;margin-bottom:1rem}
.pstep h4{font-family:var(--disp);font-size:1.5rem;text-transform:uppercase;margin-bottom:.4rem}
.pstep p{font-size:.88rem;color:var(--ink2)}
.pstep .d{font-family:var(--mono);font-size:.68rem;color:var(--brick);margin-top:.8rem;display:block}

/* CALCULATOR */
.calc{display:grid;grid-template-columns:1.25fr 1fr;border:2px solid var(--ink);background:var(--white)}
.calc-in{padding:2.4rem;display:grid;gap:1.4rem;border-right:2px solid var(--ink)}
.calc-in h3{font-size:2.4rem}
.fld>label{display:flex;justify-content:space-between;font-weight:700;font-size:.88rem;margin-bottom:.5rem}
.fld>label output{font-family:var(--mono);color:var(--green)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink)}
.seg label{cursor:pointer}
.seg input{display:none}
.seg span{display:block;padding:.75rem .5rem;text-align:center;font-weight:600;font-size:.86rem;border-right:1px solid var(--line);transition:.2s}
.seg label:last-child span{border-right:0}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
input[type=range]{width:100%;accent-color:var(--green);height:6px}
.calc-out{padding:2.4rem;background:var(--green);color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc-out::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border:30px solid rgba(255,255,255,.08);border-radius:50%}
.calc-out>*{position:relative;z-index:1}
.calc-out small{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#bfe0cf}
.calc-out .total{font-family:var(--disp);font-weight:900;font-size:clamp(2.8rem,5vw,4.2rem);line-height:1;margin:.6rem 0}
.calc-out .rows{display:grid;gap:.4rem;margin:1rem 0 1.6rem;font-size:.9rem}
.calc-out .rows div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.25);padding-bottom:.35rem}
.calc-out .btn{background:#fff;color:var(--green);border-color:#fff;box-shadow:5px 5px 0 var(--ink)}
.calc-out p.note{font-size:.76rem;color:#bfe0cf;margin-top:1rem}

/* SPLIT / WHY */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.quote-big{font-family:var(--disp);font-size:clamp(2.2rem,4vw,3.6rem);font-weight:800;text-transform:uppercase;line-height:1}
.quote-big em{font-style:normal;color:var(--green)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.check{border:2px solid var(--ink);background:var(--white);padding:1.2rem}
.check b{display:block;font-family:var(--disp);font-size:1.4rem;text-transform:uppercase}
.check span{font-size:.86rem;color:var(--ink2)}
.photo{aspect-ratio:4/5;border:2px solid var(--ink);position:relative;overflow:hidden;background:#f6f2e8;display:flex;align-items:center}
.photo svg{width:100%;height:100%}
.photo .lbl{position:absolute;left:1rem;top:1rem;background:var(--sun);color:#000;font-family:var(--mono);font-size:.7rem;padding:.4rem .7rem;font-weight:600}

/* CLIENTS + TESTI */
.clients{display:grid;grid-template-columns:repeat(6,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.clients span{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:1.6rem .8rem;text-align:center;font-family:var(--disp);font-weight:800;font-size:1.25rem;text-transform:uppercase;color:var(--muted);background:var(--white);transition:.2s}
.clients span:hover{color:var(--green)}
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.testi{background:var(--white);border:2px solid var(--ink);padding:2rem;position:relative}
.testi::before{content:"”";position:absolute;right:1.2rem;top:-.4rem;font-family:var(--disp);font-size:6rem;color:var(--green);line-height:1}
.testi p{margin-bottom:1.4rem;color:var(--ink2)}
.testi b{display:block}
.testi small{color:var(--muted);font-size:.82rem}

/* CTA */
.cta{background:var(--ink);color:var(--paper);border:2px solid var(--ink);display:grid;grid-template-columns:1.4fr 1fr;position:relative;overflow:hidden}
.cta .l{padding:4rem 3rem}
.cta h2{font-size:clamp(2.8rem,6vw,5.4rem);color:#fff}
.cta h2 span{color:var(--sun)}
.cta p{color:#c8c3b6;margin:1rem 0 2rem;max-width:480px}
.cta .r{background:repeating-linear-gradient(-45deg,var(--sun) 0 26px,var(--ink) 26px 52px);border-left:2px solid var(--ink);display:grid;place-items:center;padding:2rem}
.cta .r div{background:var(--paper);color:var(--ink);padding:1.8rem;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);text-align:center}
.cta .r b{font-family:var(--disp);font-size:2.4rem;display:block;line-height:1}
.cta .r small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted)}

/* PAGE HEAD */
.phero{padding:4.5rem 0 3rem;border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.phero .crumbs{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.phero .crumbs a:hover{color:var(--green)}
.phero h1{font-size:clamp(3.6rem,10vw,9rem);margin:1rem 0}
.phero p{max-width:620px;color:var(--ink2);font-size:1.06rem}
.phero .ghost{position:absolute;right:-1%;bottom:-4%;font-family:var(--disp);font-weight:900;font-size:clamp(8rem,22vw,20rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--line);pointer-events:none;text-transform:uppercase}

/* ABOUT */
.timeline{display:grid;gap:0;border-left:2px solid var(--ink);margin-left:.6rem}
.tl{display:grid;grid-template-columns:140px 1fr;gap:2rem;padding:1.6rem 0 1.6rem 2rem;border-bottom:1px solid var(--line);position:relative}
.tl::before{content:"";position:absolute;left:-9px;top:2.1rem;width:16px;height:16px;background:var(--green);border:2px solid var(--ink)}
.tl .y{font-family:var(--disp);font-weight:900;font-size:2.6rem;line-height:1;color:var(--green)}
.tl h4{font-family:var(--disp);font-size:1.6rem;text-transform:uppercase}
.tl p{color:var(--ink2);font-size:.94rem}
.values{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.value{padding:2rem 1.6rem;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--white)}
.value .vi{font-family:var(--disp);font-size:3rem;color:var(--brick);line-height:1;margin-bottom:.8rem}
.value h4{font-family:var(--disp);font-size:1.6rem;text-transform:uppercase;margin-bottom:.4rem}
.value p{font-size:.9rem;color:var(--ink2)}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.member{border:2px solid var(--ink);background:var(--white)}
.member .ph{aspect-ratio:1;border-bottom:2px solid var(--ink);display:grid;place-items:center;font-family:var(--disp);font-weight:900;font-size:5rem;color:rgba(255,255,255,.85)}
.member .in{padding:1rem 1.2rem}
.member h4{font-family:var(--disp);font-size:1.5rem;text-transform:uppercase}
.member small{color:var(--muted);font-size:.84rem}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cert{border:2px dashed var(--ink);padding:1.4rem;text-align:center;background:var(--white)}
.cert b{font-family:var(--disp);font-size:1.8rem;color:var(--green);display:block}
.cert span{font-size:.82rem;color:var(--ink2)}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:300px 1fr;gap:3rem;align-items:start}
.faq-side{position:sticky;top:110px;border:2px solid var(--ink);background:var(--white);padding:1.6rem}
.faq-side h4{font-family:var(--disp);font-size:1.8rem;text-transform:uppercase;margin-bottom:.6rem}
.faq-side p{font-size:.9rem;color:var(--ink2);margin-bottom:1.2rem}
.faq-cat{font-family:var(--disp);font-size:2rem;text-transform:uppercase;margin:2.4rem 0 1rem;display:flex;align-items:center;gap:.8rem}
.faq-cat:first-child{margin-top:0}
.faq-cat span{font-family:var(--mono);font-size:.7rem;color:var(--brick);border:1px solid var(--brick);padding:.15rem .5rem}
.qa{border:2px solid var(--ink);background:var(--white);margin-bottom:-2px}
.qa summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;font-weight:700;display:flex;justify-content:space-between;gap:1rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--disp);font-size:1.8rem;line-height:.8;color:var(--green);transition:.3s;flex-shrink:0}
.qa[open] summary{background:var(--ink);color:var(--paper)}
.qa[open] summary::after{transform:rotate(45deg);color:var(--sun)}
.qa p{padding:1.2rem 1.4rem;color:var(--ink2);border-top:2px solid var(--ink)}

/* CONTACT */
.cgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem;align-items:start}
.office{border:2px solid var(--ink);background:var(--white);padding:1.6rem;margin-bottom:1rem}
.office .mono{color:var(--brick)}
.office h4{font-family:var(--disp);font-size:1.7rem;text-transform:uppercase;margin:.3rem 0 .5rem}
.office p{font-size:.92rem;color:var(--ink2)}
.office .row{display:flex;gap:.6rem;align-items:center;margin-top:.4rem;font-size:.92rem}
.office .row svg{width:18px;height:18px;color:var(--green);flex-shrink:0}
.mapbox{border:2px solid var(--ink);aspect-ratio:16/11;background:var(--white)}
.mapbox svg{width:100%;height:100%}
form.cf{border:2px solid var(--ink);background:var(--white);padding:2.4rem;display:grid;gap:1.1rem;box-shadow:10px 10px 0 var(--green)}
.cf h2{font-size:2.8rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;color:var(--ink2)}
.f input,.f select,.f textarea{width:100%;background:var(--paper);border:2px solid var(--ink);padding:.85rem 1rem;border-radius:0;transition:.15s}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;background:#fff;box-shadow:4px 4px 0 var(--green)}
.f textarea{min-height:130px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{cursor:pointer}
.chips input{display:none}
.chips span{display:inline-block;padding:.5rem .9rem;border:2px solid var(--ink);font-size:.84rem;font-weight:600;background:var(--paper)}
.chips input:checked+span{background:var(--green);color:#fff;border-color:var(--green)}
.form-ok{display:none;padding:1rem;border:2px solid var(--green);background:#e3f1e9;color:var(--green);font-weight:600;font-size:.9rem}

/* MODAL */
.modal{position:fixed;inset:0;z-index:100;background:rgba(27,31,29,.72);display:none;place-items:center;padding:1.2rem}
.modal.open{display:grid;animation:fade .2s}
.mbox{width:min(960px,100%);max-height:92vh;overflow:auto;background:var(--paper);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--green);display:grid;grid-template-columns:1.1fr 1fr;position:relative}
.mbox .mimg{border-right:2px solid var(--ink);min-height:420px;position:relative;background:#f6f2e8}
.mbox .mimg svg{position:absolute;inset:0;width:100%;height:100%}
.mbox .mb{padding:2.2rem;display:flex;flex-direction:column;gap:1rem}
.mbox h2{font-size:2.8rem}
.x{position:absolute;top:10px;right:10px;width:42px;height:42px;background:var(--ink);color:var(--paper);font-size:1.3rem;z-index:2}

/* FOOTER */
footer{background:var(--ink);color:#c8c3b6;margin-top:3rem;border-top:6px solid var(--green)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2.5rem;padding:4.5rem 0 3rem}
footer .logo b{color:#fff}
footer .logo-mark{background:var(--sun)}
footer .logo-mark svg path{stroke:var(--ink)}
.fgrid h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sun);margin-bottom:1rem;font-weight:600}
.fgrid ul{list-style:none;display:grid;gap:.5rem}
.fgrid ul a{font-size:.9rem}.fgrid ul a:hover{color:#fff}
.fgrid p{font-size:.88rem;margin-top:1rem;max-width:320px}
.fword{font-family:var(--disp);font-weight:900;text-transform:uppercase;font-size:clamp(3.4rem,13vw,12rem);line-height:.8;color:transparent;-webkit-text-stroke:1px #3b413e;white-space:nowrap;overflow:hidden;text-align:center}
.fbot{border-top:1px solid #3b413e;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140px);background:var(--ink);color:var(--paper);font-weight:700;padding:.9rem 1.4rem;z-index:200;transition:.4s cubic-bezier(.2,.9,.3,1.3);box-shadow:5px 5px 0 var(--green)}
.toast.show{transform:translate(-50%,0)}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
@keyframes fade{from{opacity:0}}

/* RESPONSIVE */
@media(max-width:1180px){.menu a{padding:.6rem .7rem;font-size:.84rem}.nav .btn{display:none}}
@media(max-width:1000px){
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);border:0;border-bottom:2px solid var(--ink);display:none}
  .menu.open{display:flex}
  .menu a{padding:1rem 4%;border-right:0;border-top:1px solid var(--line);font-size:1rem}
  .burger{display:block}
  .hero-grid,.split,.calc,.cgrid,.faq-wrap,.feature,.mbox,.cta{grid-template-columns:1fr}
  .hero-art{max-width:560px}
  .svc-grid,.pgrid,.testis{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}.pstep{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);border-left:0}.process{border-left:2px solid var(--ink);border-top:2px solid var(--ink)}.pstep:last-child{border-right:2px solid var(--ink)}
  .values,.team,.certs{grid-template-columns:1fr 1fr}
  .clients{grid-template-columns:repeat(3,1fr)}
  .band .wrap{grid-template-columns:1fr 1fr}.band .s:nth-child(2){border-right:0}.band .s:nth-child(-n+2){border-bottom:1px solid #3b413e}
  .fgrid{grid-template-columns:1fr 1fr}
  .calc-in{border-right:0;border-bottom:2px solid var(--ink)}
  .feature .fimg,.mbox .mimg{border-right:0;border-bottom:2px solid var(--ink);min-height:280px}
  .cta .r{border-left:0;border-top:2px solid var(--ink)}
  .faq-side{position:static}
  .head{grid-template-columns:1fr}
}
@media(max-width:640px){
  .util .wrap>div:last-child{display:none}
  section{padding:4.5rem 0}
  .svc-grid,.pgrid,.testis,.process,.values,.team,.checks,.two,.fgrid,.certs{grid-template-columns:1fr}
  .clients{grid-template-columns:1fr 1fr}
  .tl{grid-template-columns:1fr;gap:.4rem}
  .cta .l{padding:2.6rem 1.4rem}
  .calc-in,.calc-out,form.cf,.feature .fb,.mbox .mb{padding:1.6rem}
  .filters{width:100%}
  .filters button{flex:1 1 auto}
  .logo small{display:none}
  .logo b{font-size:1.15rem}
  .logo-mark{width:38px;height:38px}
  .logo-mark svg{width:20px;height:20px}
  .seg span{font-size:.78rem}
}